zola/docs/content/documentation/content/sass.md

+++ title = "Sass" weight = 110 +++

Sass is a popular CSS preprocessor that adds special features (e.g., variables, nested rules) to facilate the maintenance of large sets of CSS rules. If you're curious about what Sass is and why it might be useful for styling your static site, the following links may be of interest:

• The official Sass website
• Why Sass?, by Dan Cederholm

Using Sass in Zola

Zola processes any files with the sass or scss extension in the sass folder, and places the processed output into a css file with the same folder structure and base name into the public folder:

.
└── sass
    ├── style.scss // -> ./public/style.css
    ├── indented_style.sass // -> ./public/indented_style.css
    ├── _include.scss # This file won't get put into the `public` folder, but other files can @import it.
    ├── assets
    │   ├── fancy.scss // -> ./public/assets/fancy.css
    │   ├── same_name.scss // -> ./public/assets/same_name.css
    │   ├── same_name.sass # CONFLICT! This has the same base name as the file above, so Zola will return an error.
    │   └── _common_mixins.scss # This file won't get put into the `public` folder, but other files can @import it.
    └── secret-side-project
        └── style.scss // -> ./public/secret-side-project/fancy.css

Files with a leading underscore in the name are not placed into the public folder, but can still be used as @import dependencies. For more information, see the "Partials" section of Sass Basics.

Files with the scss extension use "Sassy CSS" syntax, while files with the sass extension use the "indented" syntax: https://sass-lang.com/documentation/syntax. Zola will return an error if scss and sass files with the same base name exist in the same folder to avoid confusion -- see the example above.