什么是 Sass？
Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS（层叠样式表）的语法，使其更灵活、更易于维护和扩展。Sass 可以在 CSS 的基础上引入变量、函数、嵌套、继承等特性，使样式代码更加清晰、简洁、重用。
链接：Sass 官网
Sass 安装和使用
安装
Sass 是基于 Ruby 的一款程序，因此需要预先安装 Ruby 环境，如果没有安装，可以到 Ruby 官网 下载相应的版本进行安装。
安装 Sass 可以通过 gem 命令：
gem install sass
使用
有两种方式使用 Sass：
- 使用命令行工具进行编译
- 集成至开发工具或打包工具中
命令行编译
Sass 提供了命令行工具 sass，可以通过命令行工具对 Sass 文件进行编译。
例如：
sass styles.scss styles.css
这个例子中将 styles.scss 编译为 styles.css。
| 命令 | 描述 |
|---|---|
sass input.scss output.css |
编译单个文件 |
sass input.scss |
监听文件变化，自动编译 |
sass --watch input.scss |
编译整个目录 |
sass --watch app/sass:public/stylesheets |
将编译结果存放到另一个目录中 |
集成至开发工具/打包工具中
大多数前端开发工具都支持 Sass 预处理器，包括 VS Code、Sublime Text、WebStorm 等等。这些开发工具提供了内置的 Sass 插件，可以实时编译 Sass 文件并实时更新页面。
打包工具也有支持 Sass 预处理器的插件，如 webpack、gulp 等，可以通过这些插件集成 Sass 到项目中。
Sass 基础语法
Sass 变量
Sass 可以声明变量，例如：
$primary-color: #f00;
body {
color: $primary-color;
}$primary-color 是一个变量，表示主色调。在代码中使用 $primary-color 变量，可以大大提高代码的可维护性和复用性。当需要更改主色调时，只需要修改变量的值即可。
需要注意的是，变量名以 $ 符号开头。
Sass 嵌套
Sass 支持 CSS 的嵌套语法，例如：
-- -------------------- ---- -------
---------- -
------- - -----
------ ------
------- -
----------------- --------
-- -
------ -----
-
-
-------- -
-- --- --
-
-这个例子中，.container 内部嵌套了 .header 和 .content。使用嵌套语法，可以使代码清晰易读，同时也可以避免书写重复的选择器。
需要注意的是，Sass 中的嵌套可以用于选择器、属性和值的嵌套，但并不能滥用。
Sass 继承
Sass 支持继承，可以实现样式的复用。例如：
-- -------------------- ---- ------- ------ - ------ ---- ----------------- -------- ------- --- ----- ---- - -------- - ------- ------- ------------- ------- -
这个例子中，.warning 继承了 .error 的样式，并添加了一个黄色边框。
需要注意的是，如果继承了一个不存在的样式，Sass 不会报错，而是编译为一个空样式。
Sass 运算
Sass 支持数学运算，例如：
$base-font-size: 16px;
h1 {
font-size: $base-font-size * 2;
}这个例子中，h1 的字号是 $base-font-size 的两倍。
除了乘法，Sass 还支持加法、减法、除法、取余等运算符。
Sass 函数
Sass 内置了很多函数，可以帮助开发者实现更加灵活的样式。例如：
.color {
background-color: lighten(#00f, 20%);
}这个例子中，使用了 lighten() 函数，将 #00f 的颜色亮度提高了 20%。
Sass 中的函数不仅仅局限于颜色，还有很多其他类型的函数，如字符串、数字、列表、时间等。
Sass 条件语句
Sass 支持条件语句，可以根据不同的条件执行不同的样式。例如：
-- -------------------- ---- -------
------- ----
--- ------ - --- -
---------- -
------ -------
-
- ----- -
---------- -
------ -----
-
-这个例子中，如果 $width 大于 50%，则 .container 的宽度为 $width，否则为 100%。
需要注意的是，Sass 中的条件语句使用 @if 和 @else 来表示。
总结
Sass 是一种非常实用的 CSS 预处理器，可以帮助开发者提高开发效率、代码的可维护性和复用性。Sass 支持变量、嵌套、继承、运算、函数、条件语句等功能，可以让写 CSS 的过程更加简便、快捷。
如果您还没有使用过 Sass，现在是时候学习了。十五分钟的学习，为您的前端开发之路带来持久的收益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6473ba1c968c7c53b012214c