SASS 是一种 CSS 预处理器，它使得 CSS 的编写变得更简单、更易于维护。与原始的 CSS 不同，SASS 具有类似编程语言的特性，例如变量、函数、条件语句、循环、继承等，使得样式表的编写更具灵活性和可复用性。
对于初学者来说，学习 SASS 可能会觉得有些难以入门，但是只要掌握了以下几个基础知识，就可以轻松写出高效、优雅的样式表。
1. 编译工具的选择
首先，您需要为编辑的 SASS 文件选择一种编译工具。SASS 的源文件无法直接在浏览器中运行，需要使用编译工具将 SASS 文件编译为可在浏览器中运行的 CSS 文件。
目前最流行的编译工具包括：
- Sass 官方推出的命令行工具
sass，可以直接在命令行中执行； - Gulp、Webpack 等构建工具的 SASS 编译插件；
- 集成了 SASS 编译功能的代码编辑器，例如 VSCode 中的 Live Sass Compiler 插件。
选择何种编译工具，取决于你的个人喜好和项目的需求。
2. 变量
变量是 SASS 的一大特性，它可以自定义变量名，然后将其赋值给颜色值、字体大小、边距等常用值，方便多次使用。通过使用变量，不仅可以避免重复输入，还可以在需要更改时统一修改。
下面是一个示例：
$brand-color: #007bff; // 自定义品牌颜色，可根据需求修改
$btn-bg-color: $brand-color; // 使用变量
.button {
background-color: $btn-bg-color; // 应用变量
color: #fff;
border: 2px solid darken($btn-bg-color, 5%);
}变量使用 $ 符号定义，后面跟着变量名和值。上面示例中，定义了 $brand-color 变量和 $btn-bg-color 变量，后者引用了前者定义的颜色值。这样可使 .button 元素的背景色与品牌色相同，代码也更加简洁易懂。
3. 嵌套规则
SASS 支持将 CSS 规则嵌套在其他规则之内，以显示它们之间的关系。例如，在设置 font 属性时，可以将 font-family、font-size、font-weight 等规则嵌套在 font 规则之内：
h1 {
font: {
family: sans-serif;
size: 2em;
weight: bold;
}
}这个例子将 font-family、font-size 和 font-weight 这些规则嵌套在 font 规则之内，使代码具有更好的可读性。
4. 继承和占位符
SASS 还支持使用 @extend 来创建样式的继承关系。通过使用 @extend，可以使一个选择器的样式继承到另一个选择器中。这样，可以避免重复定义样式，提高代码的复用性。例如：
-- -------------------- ---- -------
-- ----------
------------ -
-------- -------------
------- --- ----- -----
-------- -----
---------- -----
-
-- --------
------- -
------- -------------
-
-- ------------------
--------------- -
------- -------------
----------------- ----
------ ------
------- -
----------------- --------
-
-上面的例子中，定义了 %base-button 占位符选择器，并在 .button 和 .special-button 中继承了它。.special-button 还增加了更多样式，以满足特殊需求。
5. 函数和条件语句
SASS 还支持编写自定义函数和使用条件语句来动态改变样式。例如：
-- -------------------- ---- -------
-- ----------------
--------- ----------------- --------- -
------- ------ - -------- - --
-
-- -- ------- ------
------ ------------------- --------- -
------ -------
------- ------
-------- ---------
------- --- ----- -----
--- ------ - ----- -
----------------- --------
- ----- -
----------------- --------
-
-
---- -
------- ------
--------- -----
------ ----------------- ---------- -- -------
-------- ------------------- ---------- -- -----
-上面的例子中，定义了 box-width() 函数和 box-styling() 混合器。box 元素的样式中，通过调用这些函数和混合器，设置了元素的宽度、高度、填充、边框和背景颜色。条件语句也使用 if-else 控制了背景颜色的选择。
总结
以上是学习 SASS 的一些基础知识。通过掌握这些知识，您可以将 SASS 的功能应用到实际的项目中，并快速提高样式表的编写效率和可维护性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64566bb3968c7c53b098eb4c