萨斯 介绍
你应该已经知道的内容
在继续之前您应该对以下内容有基本的了解：
- HTML
- CSS
如果你想先学习这些科目，可以查看我们的 主页.
什么是 Sass？
- 萨斯 代表年代句法上 A太棒了 年代风格s希特
- Sass 是 CSS 的扩展
- Sass 是一个 CSS 预处理器
- Sass 与所有版本的 CSS 完全兼容
- Sass 减少 CSS 的重复，从而节省时间
- Sass 由 Hampton Catlin 设计，并由 Natalie Weizenbaum 于 2006 年开发
- Sass 可以免费下载和使用
为什么要使用 Sass？
样式表越来越大、越来越复杂，维护起来也越来越困难。这时 CSS 预处理器就可以派上用场了。
Sass 允许您使用 CSS 中不存在的功能，如变量、嵌套规则、混合、导入、继承、内置函数和其他内容。
一个简单的例子说明 Sass 的用处
假设我们有一个有三种主要颜色的网站：
#a2b9bc
#b2ad7f
#878f99
那么，您需要输入这些十六进制值多少次？很多次。那么相同颜色的变化呢？
您无需多次输入上述值，而是可以使用 Sass 并编写如下代码：
Sass 示例
/* 定义原色变量 */
$primary_1：#a2b9bc；
$primary_2：#b2ad7f；
$primary_3：#878f99；
/* 使用变量 */
.主标题 {
背景颜色：$primary_1；
}
.菜单左侧{
背景颜色：$primary_2；
}
.菜单右{
背景颜色：$primary_3；
}
因此，当使用 Sass 时，主色发生变化，您只需在一个地方进行更改。
Sass 如何工作？
浏览器无法理解 Sass 代码。因此，您需要一个 Sass 预处理器将 Sass 代码转换为标准 CSS。
这个过程称为转译。因此，您需要向转译器（某种程序）提供一些 Sass 代码，然后获取一些 CSS 代码。
提示： 转译是指将一种语言编写的源代码转换/翻译成另一种语言。
Sass 文件类型
Sass 文件具有“.scss”文件扩展名。
Sass 评论
Sass 支持标准 CSS 注释 /* comment */，此外它还支持内联注释 // comment:
Sass 示例
/* 定义原色 */
$primary_1：#a2b9bc；
$primary_2：#b2ad7f；
/* 使用变量 */
.主标题 {
background-color: $primary_1; // 您可以在此处放置内联注释
}
