什么是 SASS？
SASS 是一种 CSS 预处理器，提供了许多增强 CSS 的功能，如变量、嵌套、混合等。在编译后会生成标准的 CSS 文件，因此，SASS 可以视为一种扩展了 CSS 功能的语言。
SASS 和 CSS 有什么区别？
1. 变量
CSS 在定义样式时不支持变量，意味着在样式中出现多个相同的颜色值或属性值时，必须重复编写。而在 SASS 中可以使用变量进行定义，例如：
-- -------------------- ---- ------- --------------- -------- - - ------ --------------- - ------ - ----------------- --------------- -
通过使用 $primary-color 变量，在样式中使用多次的颜色值只需定义一次。
2. 嵌套
在 CSS 中，为了让代码更加有层次结构，需要使用选择器的嵌套。而在 SASS 中，可以直接使用嵌套方式进行定义。例如：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
------- -
----------------- -----
-
- -
-------- ------
-------- --- -----
------ -----
---------------- -----
------- -
------ --------
-
-
-
-
-使用嵌套能够更好地表示选择器之间的关系，避免了在 CSS 中进行多次嵌套选择器的编写。
3. 混合
在 SASS 中，可以将一组样式封装为一个混合器，并在需要使用该样式时通过 @include 指令引入。例如：
-- -------------------- ---- ------- ------ ------------------------ ---- - ---------------------- -------- ------------------- -------- -------------- -------- - ---- - -------- ---------------------- -
上述例子中，定义了一个 $radius 参数默认值为 5px 的混合器 rounded-corners，并在 .box 类中通过 @include 引入混合器来设置圆角半径为 10px。
4. 继承
SASS 可以通过 @extend 将一个选择器的样式应用到另一个选择器上，从而简化代码。例如：
-- -------------------- ---- ------- ---- - -------- ----- ------- --- ----- ----- - -------- - ------- ----- ------------- ------ -
上述例子中，通过 @extend 将 .box 的样式应用到 .success 上，并且在 .success 中定义了边框颜色为绿色。
如何使用 SASS？
安装 SASS
使用 SASS 要先在电脑上安装 Sass CLI。在 MacOS 上，可以使用 Homebrew 安装：
brew install sass/sass/sass
在 Windows 上，可以使用 RubyGems 安装：
gem install sass
编写样式
SASS 的文件扩展名为 .scss，可以使用任何文本编辑器进行编写。
编译 SASS
在终端中进入项目文件夹，执行以下命令进行编译：
sass input.scss output.css
其中，input.scss 是需要编译的 SASS 文件，output.css 是编译后生成的 CSS 文件。
使用 SASS 的工具
除了使用命令行进行编译之外，也可以使用一些自动化工具帮助开发者更便捷地使用 SASS。例如 Grunt、Gulp 和 Webpack 等。
结论
SASS 提供了许多强大的功能，可以帮助开发者提高 CSS 的编写效率，并且可以将样式表维护得更加清晰。但是，在项目中使用 SASS 时，也需要注意编写规范，尽量避免出现嵌套深度过深、样式重复定义等问题，以保证项目的易读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb1c19447136260156f37f