收藏617
分享
阅读2539
更新时间2025-08-14
在继续之前，您应该对以下内容有基本的了解：
如果您想先学习这些科目，请在我们的 主页 上访问这些教程。
样式表越来越大、越来越复杂，也越来越难维护。这是 CSS 预处理器可以提供帮助的地方。
Sass 允许您使用 CSS 中不存在的特性，比如变量、嵌套规则、mixin、导入、继承、内置函数和其他功能。
假设我们有一个具有三种主要颜色的网站：
#a2b9bc #b2ad7f #878f99那么，您需要键入这些 HEX 值多少次？很多次。如果相同的颜色发生变化呢？
您可以使用 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 代码转换为标准 CSS。
这个过程称为转译（transpiling）。所以，您需要为转译器（某种程序）提供 Sass 代码，然后取回 CSS 代码。
提示：转译是一个术语，用于将用一种语言编写的源代码转换/翻译成另一种语言。
Sass 文件的文件扩展名是 ".scss"。
Sass 支持标准的 CSS 注释 /* comment */，此外还支持行内注释 // comment：
/* 定义主要的颜色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 使用变量 */
.main-header {
background-color: $primary_1; // 您可以在这里添加行内的评论
}
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
