CSS 是前端开发中不可或缺的一环，但是编写和维护大型 CSS 代码库是非常困难的。这时候 SASS 就发挥了非常重要的作用。它是 CSS 的一个拓展，提供了许多便利功能，使得编写 CSS 样式表更加方便、易于维护。
什么是 SASS
SASS 是 Syntactically Awesome Style Sheets 的简写。它是一个对 CSS 的扩展，提供了层叠样式表中不具备的一些特性。 SASS 使得 CSS 更加易于维护，使得你能够使用变量、嵌套规则、函数、运算符和 mixin（混合）等。
SASS 也提供了两种语法：SASS 和 SCSS。 SASS 使用严格的缩进来表示层级关系，而 SCSS 使用了和 CSS 相同的语法和花括号。多数时候，人们应该选择使用 SCSS。因为它和 CSS 更加相似，可以更容易的理解和阅读。
如何使用
安装
在开始使用 SASS 之前，首先需要安装。可以通过以下任何一种方式进行安装：
- 通过 Ruby 运行环境进行安装。这是最早的方式，也是最常见的方式。
- 通过 npm 进行安装，使用命令：npm install -g sass
使用
安装完成后，可以在命令行或终端中，通过下面的命令来将 SCSS 文件编译成 CSS 样式表：
sass input.scss output.css
该命令的意思是将 input.scss 文件编译成 output.css 文件。如果需要编译整个文件夹，可以使用下面的命令：
sass input-dir:output-dir
该命令的意思是将 input-dir 目录下的内容编译成 output-dir 目录。所有子目录下的源文件会根据相应的目录结构，在输出目录中重新创建。
功能
SASS 扩展了 CSS，提供了一些功能，让编写和维护样式表变得非常方便。下面是一些主要功能：
变量
SASS 允许在样式表中定义变量，并在需要的地方使用它们。这使得代码更容易维护，因为可以集中定义颜色、字体等可重用值，而不需要在整个文件中查找和替换出现的所有实例。
$primary-color: #333;
body {
color: $primary-color;
}嵌套规则
SASS 允许在层级结构上定义样式，这使得代码更加易于阅读和理解。 在传统的 CSS 中，选择器的层次结构只能从左到右读取，并且容易产生回调和层叠问题。
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-
-- -
------ -----
-
-mixin
SASS 允许在样式定义中定义 mixin，并在需要的地方使用它们。这类似于函数。使用 mixin 可以减少在样式表中重复的代码。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }运算符
SASS 允许在样式表中使用运算符，例如：加减乘除。 这使得处理样式时更加容易。
.container {
width: 600px / 960px * 100%;
}
.box {
margin-left: 20px + 10px;
}继承
SASS 允许在样式定义中使用继承，这类似于面向对象编程语言中的继承。这可以大大减少样式表中的代码，提高代码的可重用性。
-- -------------------- ---- ------- ---------- - ----------- ----- ------- ----- --- ----- - ---- - ------- ----------- -------- ----- -
示例代码
下面是一段使用了 SASS 的示例代码，页面的导航中使用了变量、嵌套规则和 mixin：
-- -------------------- ---- -------
--------------- -----
----------------- --------
--- -
-- -
------- --
-------- --
----------- -----
-
-- -
-------- -------------
------------------- -
------------ -----
-
-
- -
------ ---------------
---------------- -----
-------------- ----- --- ------------
------- -
------ -----------------
-------------------- -----------------
-
-
------- -
-------- -------------------
----------------- -----
------ ------
-------- --- -----
---------------- -----
------- -
----------------- -----
-
-
-以上代码中，SASS 使用了变量和 mixin 来创建可重用的值，使用了嵌套规则来表示层级结构。这使得样式表更加易于维护，减少了代码量，同时增加了灵活性。
结论
SASS 是 CSS 的强大拓展，它允许你使用变量、嵌套规则、函数、运算符和 mixin 等，让编写和维护 CSS 样式表变得更加容易。通过使用 SASS，您可以为样式表提供结构、可重用值和灵活性。现在，您已经了解了 SASS 的基础知识，可以开始在自己的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671dc4ee9babaf620fb80c64