什么是 Sass
Sass (Syntactically Awesome Style Sheets) 是一种 CSS 预处理器，它提供了比原生 CSS 更加强大的功能和语法。Sass 可以让前端开发者更加高效地编写和维护 CSS 代码，同时也可以提高代码的可读性和可维护性。
Sass 支持两种语法格式：Sass 和 SCSS。Sass 使用缩进的方式表示代码块和嵌套关系，而 SCSS 则使用花括号和分号的方式表示代码块和嵌套关系。在本文中，我们主要使用 SCSS 语法格式。
Sass 原生 CSS 支持
Sass 可以直接支持原生 CSS 的语法和特性，也就是说，你可以在 Sass 中使用原生 CSS 的所有语法和属性。例如：
-- -------------------- ---- ------- -- ---- ----- --- -- ---------- - ------ ----- ------- - ----- - -- ---- ----- --- --- ---------- - - ---------- ----- - -- ---- ----- --- -- ---------- ------- - ---------------- ----- -
这些原生 CSS 的语法和特性可以让开发者更加方便地使用 Sass 编写样式。
Sass 的高级特性
除了原生 CSS 的语法和特性外，Sass 还提供了许多高级特性，包括变量、嵌套、混合器、继承、函数等。这些特性可以大大提高代码的可读性和可维护性，同时也可以让开发者更加高效地编写样式。
变量
Sass 支持变量，可以使用 $ 符号定义一个变量，然后在样式中使用这个变量。例如：
// 定义一个变量
$primary-color: #007bff;
// 使用变量
.button {
background-color: $primary-color;
color: white;
}使用变量可以让开发者更加方便地管理样式中的颜色、字体、边框等属性。
嵌套
Sass 支持嵌套，可以在样式中嵌套选择器和属性。例如：
-- -------------------- ---- -------
-- -----
---------- -
------ -----
------- - -----
- -
---------- -----
-
- -
------ ---------------
------- -
---------------- -----
-
-
-
-- ----
---- -
------- -
------ ----
------ ------
------ ---------------
-
-使用嵌套可以让样式更加清晰和易于理解，同时也可以减少代码的冗余。
混合器
Sass 支持混合器，可以使用 @mixin 定义一个混合器，然后在样式中使用这个混合器。例如：
-- -------------------- ---- ------- -- ------- ------ ----------------------- ------------ - ----------------- ---------- ------ ------------ -------- ---- ----- -------------- ---- - -- ----- ------- - -------- ---------------------------- ------- -
使用混合器可以让开发者更加方便地复用样式，同时也可以减少代码的冗余。
继承
Sass 支持继承，可以使用 @extend 继承一个选择器的样式，然后在样式中使用继承后的选择器。例如：
-- -------------------- ---- ------- -- ------- ---- - ------- --- ----- --------------- -------- ----- - -- -------- ------------ - ------- ----- ------------- ------ - ---------- - ------- ----- ------------- ---- -
使用继承可以让开发者更加方便地重用样式，同时也可以减少代码的冗余。
函数
Sass 支持函数，可以使用 @function 定义一个函数，然后在样式中使用这个函数。例如：
-- -------------------- ---- ------- -- ------ --------- ---------- --- - ------- -- - --- - -- ---- ---------- - ------ ----------- -- - ---- -
使用函数可以让开发者更加方便地计算样式中的值，同时也可以减少代码的冗余。
Sass 的编译方式
Sass 的源代码需要编译成原生 CSS 才能在浏览器中使用。Sass 支持多种编译方式，包括命令行编译、集成开发环境编译、在线编译等。
命令行编译
Sass 可以通过命令行编译，需要先安装 Sass 的命令行工具。安装完成后，在命令行中执行以下命令即可编译 Sass 文件：
sass input.scss output.css
其中，input.scss 是需要编译的 Sass 文件，output.css 是编译后的 CSS 文件。如果需要监听 Sass 文件的变化并自动编译，可以执行以下命令：
sass --watch input.scss:output.css
集成开发环境编译
许多集成开发环境都支持 Sass 的编译，例如 Visual Studio Code、Sublime Text、WebStorm 等。可以在编辑器中安装 Sass 插件，然后在编辑器中打开 Sass 文件并保存即可自动编译。
在线编译
Sass 官网提供了一个在线编译器，可以直接在浏览器中编写 Sass 代码并编译成 CSS。访问 Sass 官网，点击 Try Sass 即可打开在线编译器。
总结
Sass 是一种强大的 CSS 预处理器，可以让开发者更加高效地编写和维护 CSS 代码。Sass 支持原生 CSS 的语法和特性，同时也提供了许多高级特性，包括变量、嵌套、混合器、继承、函数等。Sass 的源代码需要编译成原生 CSS 才能在浏览器中使用，可以使用命令行编译、集成开发环境编译、在线编译等方式进行编译。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66378db5d3423812e45b69e2