Sass

Sass 是一种流行的 CSS 预处理器,它添加了特殊功能(例如,变量、嵌套规则)以促进大型 CSS 规则集的维护。如果您对 Sass 是什么以及为什么它对您的静态站点样式有用感到好奇,您可能会对以下链接感兴趣:

它目前使用grass,一种 Sass 的 Rust 实现,大致相当于 dart-sass。

🔗在 Zola 中使用 Sass

Zola 处理文件夹中带有sass或扩展名的任何文件 ,并将处理后的输出放入文件夹中具有相同文件夹结构和基本名称的文件中:scsssasscsspublic

.
└── 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/style.css

名称中带有前导下划线的文件不会放入public 文件夹中,但仍可用作@import依赖项。有关更多信息,请参阅Sass Basics的“Partials”部分

具有扩展名的文件scss使用“Sassy CSS”语法,而具有sass扩展名的文件使用“缩进”语法:https://sass-lang.com/documentation/syntaxscss如果同一个文件夹中存在具有相同基本名称的文件,Zola 将返回错误sass以避免混淆——参见上面的示例。