15.10 Style HTML pages with Sass/SCSS

Sass (https://sass-lang.com) is a CSS extension language that allows you to create CSS rules in much more flexible ways than you’d do with plain CSS. Please see its official documentation if you are interested in learning it.

The R package sass (Cheng et al. 2020) can be used to compile Sass to CSS. Based on the sass package, knitr includes two language engines: sass and scss (corresponding to the Sass and SCSS syntax, respectively) to compile code chunks to CSS. Below is a scss code chunk, with the chunk header ```{scss}:

$font-stack: "Comic Sans MS", cursive, sans-serif;
$primary-color: #00FF00;
.book.font-family-1 {
  font: 100% $font-stack;
  color: $primary-color;
}

You can also use the sass engine, and the Sass syntax is slightly different with the SCSS syntax, e.g.,

```{sass}
$font-stack: "Comic Sans MS", cursive, sans-serif
$primary-color: #00FF00
.book.font-family-1
  font: 100% $font-stack
  color: $primary-color
```

If you are reading the HTML version of this section, you will notice that the font for this page has been changed to Comic Sans, which might be surprising, but please do not panic—you are not having a stroke.

The sass/scss code chunks are compiled through the sass::sass() function. Currently you can customize the output style for the CSS code via the chunk option engine.opts, e.g., engine.opts = list(style = "expanded"). The default style is “compressed.” If you are not sure what this means, please refer to the help page ?sass::sass_options and look for the output_style argument.

References

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