Sass 简介

什么是 Sass?

Sass 英文全称是 Syntactically Awesome Stylesheets
Sass 是 CSS 的一个扩展
Sass 是一个 CSS 预处理器
Sass 与 CSS 的所有版本完全兼容
Sass 减少了 CSS 的重复代码，因此节省了时间
Sass 在 2006 年由 Hampton Catlin 设计，Natalie Weizenbaum 开发的
Sass 是免费下载和使用的

为何使用 Sass?

样式表越来越大，越来越复杂，也越来越难维护。这是 CSS 预处理可以提供帮助的地方。

Sass 可以让您使用 CSS 中不存在的特性，如变量、嵌套规则、混合、导入、继承、内置函数和其他内容。

Sass 有用的一个简单示例

假设我们的网站有三种主要颜色：

#a2b9bc

#b2ad7f

#878f99

那么，您需要输入多少次这些十六进制值？很多次。同样颜色的变化又如何呢？

您可以使用 Sass 并编写以下命令，而不是多次输入上述值:

Sass 实例

/* 定义主色的变量 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 使用变量 */
.main-header{
 background-color: $primary_1;
}
.menu-left{
 background-color: $primary_2;
}
.menu-right{
 background-color: $primary_3;
}

因此，当使用 Sass 时，主色会发生变化，您只需在一个位置进行更改。

Sass 工作原理

浏览器不能解析 Sass 代码。因此，您需要一个 Sass 预处理器来将 Sass 代码转换为标准 CSS。

这个过程称为 "Transpiling"。因此，您需要向 transpiler（某种程序）提供一些 Sass 代码，然后返回对应的 CSS 代码。

提示：Transpiling 是一个术语，用于获取用一种语言编写的源代码并将其转换/翻译成为另一种语言。

Sass 文件类型

Sass 文件具有 ".scss" 文件扩展名。

Sass 注释

Sass 支持标准 CSS 注释 / comment /，此外，它还支持内联注释 // comment:

Sass Example

/* 定义主色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 使用变量 */
.main-header{
 background-color: $primary_1; // 在这里，您可以放置一个内联注释
}