15.10 Sass/SCSS で HTML ページをスタイリングする
Sass (https://sass-lang.com) は CSS を拡張した言語で, 基本的な CSS で行っていた のよりはるかに柔軟な方法でルールを作成できます. これを学ぶことに関心があるなら, 公式ドキュメントを見てください.
R パッケージの sass (Cheng et al. 2021) は SaSS を CSS にコンパイルするのに使用できます. sass パッケージに基づいて, knitr はコードチャンクを CSS にコンパイルするため2つの言語エンジン, sass and scss を読み込みます. Sass と SCSS の構文は互いに対応しているためです. 以下はチャンクヘッダが ```{scss} である scss コードチャンクです.
$font-stack: "HGS創英角ﾎﾟｯﾌﾟ体", "Comic Sans MS", cursive, sans-serif;
$primary-color: #00FF00;
.book.font-family-1 {
font: 100% $font-stack;
color: $primary-color;
}sass エンジンも使うことができます. Sass 構文は SCSS 構文とわずかに異なります. 例えばこのように.
```{sass}
$font-stack: "HGS創英角ﾎﾟｯﾌﾟ体", "Comic Sans MS", cursive, sans-serif
$primary-color: #00FF00
.book.font-family-1
font: 100% $font-stack
color: $primary-color
```あなたがこのセクションの HTML 版を読んでいるなら, このページのフォントが Comic Sans に変化したことに気付くでしょう. これには驚いたかもしれませんが, パニックにならないでください, あなたは脳卒中になどなっていません.
sass/scss コードチャンクは sass::sass() 関数によってコンパイルされます. 現在はチャンクオプション engine.opts で CSS コードの出力スタイルをカスタマイズできます. 例えば engine.opts = list(style = "expanded") のように. デフォルトのスタイルは “compressed” です. これが何を意味するのか自信がないなら, ?sass::sass_options のヘルプを参照し, output_style 引数の項目を探してください.