SASS and CSS

On this page we will:

  • Understand, in simple terms, what Sass and CSS are.
  • See when you might use each in a Quarto site.
  • Make changes using a .scss file and a .css file.

When you customise the look of a Quarto site, you are changing how the web page is styled.

Web pages are styled with CSS, which stands for “Cascading Style Sheets”. CSS is a simple styling language that tells the browser things like:

There is also Sass, which you can think of as a helper language for writing CSS. Sass lets you define variables (for example, $navbar-bg for the navbar background colour). Quarto themes come with a set of Sass variables you can override, so you can change key theme‑level settings without writing lots of detailed rules.

In practice in a Quarto site:

1 Sass

You use Sass in Quarto by creating an .scss file and listing it under theme:.

Quarto HTML themes expose many Sass variables you can override (for example, $body-bg, $body-color, $navbar-bg). You can see a fuller list in the Quarto documentation.

Example SCSS theme file:

$body-bg: #fdf6e3;
$body-color: #002b36;
$navbar-bg: #d33682;

Here the values like #d33682 are hex colour codes. A hex code is a way of writing a colour using six characters after a #. You can find these by searching online, or can pick them from an image using a hex colour picker.

Then in _quarto.yml:

format:
  html:
    theme: [default, styles.scss]

This says, start with default theme, then apply my overrides from styles.scss.

Task:

2 CSS

You use CSS in Quarto by creating a .css file and listing it under format: → html: → css: in _quarto.yml (or in an individual page’s YAML):

format:
  html:
    css: custom.css

Inside custom.css, you write rules like:

h1, h2 {
  letter-spacing: 0.03em;
}

.pale-blue {
  background-color: #e6f2fa;
  color: black;
  border: 2px solid #9ecae1;
  border-radius: 8px;
  padding: 1.2em 1em 0.5em 1em;
  margin: 1.5em 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
}
  • The h1, h2 rule changes the spacing between letters for level‑1 and level‑2 headings.
  • The .pale-blue rule controls how any element with class pale-blue is styled - this example is the blue boxes we used for tasks on this site.

Task: