Sass是 Syntactically Awesome Style Sheet 的缩写形式。它是对级联样式表 (CSS) 的升级。 Sass 是一个 CSS 预处理器。它与每个版本的 CSS 完全兼容。 Sass 减少了 CSS 的重复，从而节省了时间。它由 Hampton Catlin 设计，由 Natalie Weizenbaum 于 2006 年开发。Sass 可免费下载和使用。
先决条件：
- HTML
- CSS
工作： Web 浏览器不理解 Sass 代码本身。这就是为什么你需要一个 Sass 预处理器来将 Sass 代码转换成简单的标准 CSS。
上述过程称为transpiling 。所以，你需要给转译器一些 Sass 代码，然后作为回报取回一些 CSS 代码。
注意：转译是用于获取一种语言的源代码输入并将其翻译成另一种语言的输出的术语。
文件类型：所有 Sass 文件必须具有".scss"文件扩展名。
注释： Sass 支持标准的 CSS 注释" /* comment */ " ，同时它还支持内嵌注释"// comment" 。
例子：
/* Define fonts using variables */
$font_1: Algerian;
$font_2: Times New Roman;
.main {
font: $font_1;
}
这将导致以下 CSS 输出：
/* Define fonts using variables */
.main {
font: Algerian;
}
SASS的系统要求和安装：
- 操作系统： Sass 是独立于平台的。
- 浏览器支持： Sass 适用于 Edge/IE(来自 IE 8)、Firefox、Chrome、Safari、Opera。
- 编程语言： Sass 基于 Ruby。
有关 Sass 和安装的更多信息，请访问 Sass 官方网站 https://sass-lang.com/
Sass 的一个基本示例。让我们假设一个网站基本上有 3 种字体。如果它必须一次又一次地编写相同的字体样式，那将是一团糟。您可以使用下面的 Sass，而不是一次又一次地编写字体值。
例子：
$font_1: Algerian;
$font_2: Times New Roman;
$font_3: Serif;
.main {
font: $font_1;
}
.menu-1 {
font: $font_2;
}
.menu-2 {
font: $font_3;
}
这将导致以下 CSS 输出：
.main {
font: Algerian;
}
.menu-1 {
font: Times New Roman;
}
.menu-2 {
font: Serif;
}