SASS是一种CSS预处理器，使得开发者可以更加便捷、优雅地编写 CSS。SASS支持嵌套、变量、Mixin等高级语法，而这些功能可以使我们在编写 CSS 时更加灵活和高效。
安装与使用
首先，我们需要安装 node.js 和 SASS。使用以下命令安装 SASS:
$ sudo npm install -g sass
在项目中使用 SASS，有两种方式：
- 直接将SASS文件编译为CSS文件
- 使用自动化构建工具来自动处理SASS文件
这里，我们将使用第一种方式。
SASS基础语法
变量
在SASS中，我们可以使用 $ 符号定义变量。例如:
$primary-color: #3bbfce;
定义一个主颜色为 #3bbfce 的变量。
在样式中使用变量，只需要在样式中使用变量名。例如：
a {
color: $primary-color;
}这样我们在样式中就可以使用我们已经定义好的变量了。
嵌套
SASS支持选择器的嵌套。例如：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
-
-- -
-------- -------------
-
-这样我们就可以使用更加优雅，并且易于阅读的代码。
Mixin
Mixin允许我们创建可重用的样式块。例如:
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}这样我们就可以在样式中使用 center 来获得这些样式。
Extend
Extend 允许我们继承其他选择器的样式，例如:
-- -------------------- ---- -------
---- -
------ ------
----------------- -----
------- -
----------------- ------
-
-
------------ -
------- -----
----------------- ----
-这样我们就可以使用 .btn 的样式并添加一些其它的样式到 .btn-primary.
SASS高级语法
条件语句
在SASS中，我们可以使用 if 语句来控制样式规则。例如:
-- -------------------- ---- -------
------ ---------------------- -
---------- -- ----- -
----------------- -----
------ ------
- ----- --------- -- ---- -
----------------- ----
------ ------
- ----- -
----------------- -----
------ ------
-
-这个例子定义了一个通用的 button-variant mixin。如果 color 是 blue，我们设置背景颜色 blue，字体颜色 white。如果 color 是 red，我们设置背景颜色 red， 字体颜色 white。最后，如果 color 不是 blue 和 red，则设置背景颜色 gray 和字体颜色 white。
循环语句
在SASS中，我们可以使用 for 循环来遍历数组和列表。例如：
@for $i from 1 through 3 {
.col-#{$i} {
width: 100% / 3 * $i;
}
}这样，我们就可以定义一组样式，每个样式都有一个不同的宽度值。
总结
使用SASS可以使我们的样式表更加优雅和简洁，并且增加了样式表的可维护性。无论是在个人项目，还是在大型项目中，使用SASS都可以帮助我们更加高效的开发并维护样式表。
使用SASS的几个技巧：
- 使用变量来避免样式中的硬编码
- 使用嵌套来使代码更加易于阅读和理解
- 使用Mixin来减少重复的样式
- 使用 Extend 来继承其他选择器的样式
让我们来看一个示例的SASS代码:
-- -------------------- ---- -------
-------------- --------
---- -
----------------- --------------
------ ------
------- -
----------------- --------------------- -----
-
-
------ -
------- -----
---------- -----
-
---- -
-- -
------- --
----------- -----
-
-- -
-------- -------------
------------- -----
-------- -
------ ----
-
-
-这个例子定义了一个 button 的样式，一个 popup 类型的样式和一个导航菜单的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e15e55f6b2d6eab3c86e0e