Sass 简介
阅读本教程前，您需要了解的知识:
阅读本教程前，您需要了解的知识:
- HTML
- CSS
如果你想先学习这些课程，请在我们的 主页 上找到教程。
什么是 Sass?
- Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 于 2006 开发的层叠样式表语言。
- Sass 是一个 CSS 预处理器。
- Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
- Sass 完全兼容所有版本的 CSS。
- Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
- Sass 生成良好格式化的 CSS 代码，易于组织和维护。
- Sass 文件后缀为 .scss。
为什么使用 Sass?
CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。
Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
我们可以举个例子
我们会在 CSS 中重复使用很多次十六进制的颜色代码，当有了变量之后，如果要改变颜色代码，只要修改变量的值就好了:
#a2b9bc
#b2ad7f
#878f99
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 代码。
Sass 文件后缀
Sass 文件后缀为 ".scss" 。
Sass 注释
Sass 支持标准 CSS 注释 /* comment */, 此外，它还支持内联注释 // comment:
Sass 实例
/* 定义原色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/*
使用变量 */
.main-header
{
background-color: $primary_1; // 在这里你可以放一个内联注释
}
