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 引数の項目を探してください.

参考文献

Cheng, Joe, Timothy Mastny, Richard Iannone, Barret Schloerke, and Carson Sievert. 2021. Sass: Syntactically Awesome Style Sheets (Sass). https://github.com/rstudio/sass.