前端开发离不开样式的制定和管理，CSS 是样式表语言，它用于定义 HTML 元素的外观和感觉。然而，CSS 语言有许多的不足，像没有变量、函数、嵌套规则、模块化等。这就给一些复杂的项目带来了很多麻烦，例如样式的复用、维护和扩展。
针对 CSS 的不足，Sass 出现了。Sass (Syntactically Awesome Stylesheets) 是一个 CSS 的预处理器，它使开发者能够使用变量、嵌套规则、函数等许多 CSS 缺失的特性。
Sass 的简介
Sass 是一种预处理器，它的工作方式就像编译器一样。在 Sass 的语法中，我们可以使用源代码结构化的方式去创建 CSS 样式。
与传统的 CSS 不同，Sass 具有许多的扩展和改进：
1. 变量
CSS 中无法定义变量，而在 Sass 中，我们可以定义并使用变量。
$primary-color: #007bff;
$bg-color: #f8f9fa;
body {
background-color: $bg-color;
color: $primary-color;
}2. 嵌套规则
在 Sass 中，我们可以使用嵌套规则，更加清晰明了的表达我们的样式。
-- -------------------- ---- -------
------- -
----------------- ---------------
------ ------
---------- -----
------- -
------ ------
-
-
3. 语义化的 Mixins
如果我们在 CSS 中想快速定义复杂的样式，需要写多个 CSS 属性，并且声明很多样式的重复代码。而 Sass 提供了语义化的 Mixins，可以让我们更好地组织样式代码。
-- -------------------- ---- -------
------ ------------------------------- ------- -
----------------- ------------------
------ -------
---------- -----
------- -
------ ------
-
-
--------------- -
-------- ---------------------------- -------
-
4. 组合选择器
在 Sass 中，我们可以使用组合选择器，并且可以将它们结合使用。这可以减少代码的重复开发。
-- -------------------- ---- -------
---- -
---------- -----
--------- -
----------------- ---------------
------ ------
-
-------- -
----------------- --------------
------ ------
-
--------- -
----------------- ---------------
------ ------
-
-
Sass 学习入门指南
安装 Sass
- Windows 下，在命令行运行：
npm install -g sass - Mac 下，在命令行运行：
sudo gem install sass
Sass 代码编写
在编写 Sass 代码时，我们应该注意以下几个方面：
- 给 Sass 使用正确的扩展名，
.scss, "Sassy CSS" 的缩写。 - 使用嵌套规则和 Mixins 来组织和减少样式。
- 定义和使用变量来避免重复的样式和简化代码。
Sass 代码编译
我们可以使用命令行将 Sass 代码编译成 CSS。在处理 Sass 代码时，我们可以选择以下两种方式：
一次性编译
在命令行中输入以下命令可进行一次性编译
scss文件为css文件。sass source/style.scss build/style.css
实时编译
在命令行运行以下命令可开启 Sass 实时编译。
sass --watch scss:css
运行命令后， Sass 会出现在 CSS 文件改变时自动编译，并将编译结果输出到相应的 CSS 文件。
总结
Sass 可以帮助我们更加高效地管理和维护 CSS 代码，并使得样式表更加易于理解和组织。除此之外， Sass 也拥有一套完备的扩展，如控制流、函数等。因此，如果你希望提高你的 CSS 编写效率，你一定要试试 Sass！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ab9a0968c7c53b0664646