Cascading Style Sheets in ODS [CSSを利用したレポート作成]

The 10th Osaka SAS Study Session Cascading Style Sheets in ODS. Satoshi Sekine Fujimoto Pharmaceutical Corp. CSSを利用したレポート作成 関根 暁史 （藤本製薬株式会社）

The 10th Osaka SAS Study Session CSS（Cascading Style Sheets） ➢ Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of content and presentation,including layout, colors, and fonts. 「Wikipedia」 ods excel file="./CLASS.xlsx" cssstyle="./STYLE.css"; Cssstyle option Using CSS 2

The 10th Osaka SAS Study Session Basics of the CSS Selector{Property:Value;} Cascading The style defined upstream is inherited. Where What How 3

The 10th Osaka SAS Study Session The report output of the default ods excel file="./CLASS.xlsx" options(sheet_name="Student Data"); proc report data=sashelp.class; run; ods excel close; MS PGothic 4

The 10th Osaka SAS Study Session Making of the CSS Header cells th{font-family:Arial;background-color:#d3d3d3;font-size:10pt;fontweight:bold;border:1px solid #000000;} td{font-family:Times New Roman;font-size:9pt;border:1px solid #000000;} Data part This is saved as “STYLE.css”. 5

The 10th Osaka SAS Study Session The report output that the CSS was imported ods excel file="./CLASS.xlsx" cssstyle="./STYLE.css" options(sheet_name="Student Data"); proc report data=sashelp.class; run; ods excel close; The appearance was changed globally. 6

The 10th Osaka SAS Study Session Local cell（Color） R1C2：Blue tr:nth-child(1) td:nth-child(2){color:#0000ff;} tr:nth-child(2) td:nth-child(2){color:#ff0000;} R2C2:Red 7

The 10th Osaka SAS Study Session Local cell（BackgroundColor） R6C3：Cyan tr:nth-child(6) td:nth-child(3){backgroundcolor:#00ffff;} tr:nth-child(8) td:nth-child(3){backgroundcolor:#ffc0cb;} R8C3：Pink 8

The 10th

Osaka SAS
Study
Session

The CSS that was made dynamically
filename _out "./STYLE.css" ;
data _null_; set sashelp.class;
obs=put(_n_,best.);
･･･
if sex="F" then do;
wk="tr:nth-child("||strip(obs)||") td:nth-child(2){color:#ff0000;}";*red;
put wk;
end;
if sex="M" then do;
wk="tr:nth-child("||strip(obs)||") td:nth-child(2){color:#0000ff;}";*blue;
put wk;
end;
if .<age<=12 then do;
wk="tr:nth-child("||strip(obs)||") td:nth-child(3){backgroundcolor:#00ffff;}";*cyan;
put wk;
end;
if age>=15 then do;
wk="tr:nth-child("||strip(obs)||") td:nth-child(3){backgroundcolor:rgb(234,145,152);}";*pink;
put wk;
end;
run;

9

The 10th Osaka SAS Study Session The CSS that was made dynamically Male：Blue 12years or younger：Cyan Female： Red 15years or older：Pink It is good for expression out of a clinical inspection standard value range！ 10

The 10th Osaka SAS Study Session The appearance similar to CDISC similar to CDISC th{background-color:#6699CC;color:#ffffff;} tr:nth-child(odd) td{background-color:#ffffff;} Odd number line(2n+1) tr:nth-child(even) td{background-color:#e2e2e2;} Even number line(2n) 11

The 10th Osaka SAS Study Session The appearance similar to CDISC The style imitates CDISC. Converted into RTF 12

The 10th

Osaka SAS
Study
Session

The appearance was changed for each seat
ID for the Class sheet

#class th{background-color:orange;}
#bmt th{background-color:#6699CC;color:white;}

ods excel options(sheet_name="Class") anchor="class";
proc report data=sashelp.class;
run;
ods excel options(sheet_name="BMT") anchor="bmt";
proc report data=sashelp.bmt;
run;

ID for the BMT sheet

#class

#bmt
13

The 10th Osaka SAS Study Session The appearance was changed for each seat The header part was painted in orange. The header part was painted in skyblue. 14

The 10th Osaka SAS Study Session Conclusion ➢ The CSS makes the appearance change of the document globally without “proc template” technology. ➢ The CSS makes the appearance change of the document locally without “compute” or “call define” technology. ➢ The CSS is imported in both “ODS Excel” and “ODS RTF”. About a change of the appearance, CSS substitutes proc template and proc report. 15

The 10th Osaka SAS Study Session References ➢ Cynthia L. Zender (2009)．CSSSTYLE: Stylish Output with ODS and SAS， SAS Global Forum 2009, Paper 014-2009 ➢ Kevin D. Smith (2011)．Unveiling the Power of Cascading Style Sheets (CSS) in ODS，SAS Institute Inc., Paper 297-2011 ➢ SAS Institute Inc. (2011)．SAS9 ODS Cascading Style Sheet (CSS) Tip Sheet ➢ William E Benjamin Jr (2018)．Working with the SAS ODS EXCEL Destination to Send Graphs, and Use Cascading Style Sheets When Writing to EXCEL， PharmaSUG 2018, Paper HT-05 16

The 10th Osaka SAS Study Session Thank you for your attention. 17