CSS 对于前端开发来说是一门重要的语言，但是它的语法过于冗长，对于大型项目而言，CSS文件容易变得相当复杂。为了解决这个问题，一些前端开发者开始尝试使用 CSS 预处理器，如 SASS。
SASS 简介
SASS（Syntactically Awesome Style Sheets）是一种CSS的预处理器，它提供了比CSS更为强大的功能和一些更加可读的语法。SASS使开发者能够在编写 CSS 的同时使用变量、混合器、继承等功能，从而大大提高 CSS 的可维护性和可读性。
SASS 的安装和使用
首先需要安装，可以使用 npm 命令进行安装：
npm install sass
安装完成之后，你就可以通过以下命令将 SASS 文件转换成 CSS 文件：
sass input.scss output.css
SASS 中的变量
在 CSS 中，如果你的样式中需要使用多次同样的值，你就需要将这个值声明成变量，这样改变这个值时，所有使用这个变量的地方都会被修改。SASS 也提供了这样的功能，比如下面这个例子：
$primary-color: #1abc9c;
$secondary-color: #2c3e50;
body {
background-color: $primary-color;
color: $secondary-color;
}使用 SASS 定义变量非常简单，只要在使用这个变量的地方加上 “$” 符号即可。这个例子中首先定义了两个变量：$primary-color 和 $secondary-color 分别用于设置背景颜色和字体颜色。然后使用这些变量在样式中设置这些属性值。
SASS 中的混合器
如同变量一样，混合器允许我们重复使用一段 CSS 代码。混合器在定义后可以被像普通样式一样引用。SASS 中的混合器是使用 @mixin 关键字来定义的。例如，在下面的例子中，我们定义了一个名为 fancy-border 的混合器，可以为任何元素添加一个粗细为 3px、颜色为 black，边框类型为 dotted 且圆角半径为 10px 的边框：
@mixin fancy-border {
border: 3px dotted black;
border-radius: 10px;
}
.container {
@include fancy-border;
}在上面的例子中，我们使用 @include 关键字来引用混合器。被 @include 引用的混合器中的样式就会被插入到定义它的选择器中。这个例子中，我们将 fancy-border 混合器应用在了 .container 选择器中。
SASS 中的继承
在大多数情况下，通过继承方式在多个类之间共享样式是非常方便的。就像 SASS 中的变量和混合器一样，继承也是非常重要的一个特性。
在 SASS 中，通过 @extend 关键字来选择一个元素并从一个已经定义的样式中继承。例如，在以下代码中，我们定义了 btn 样式，并将其应用于 .submit：
-- -------------------- ---- ------- ---- - ----------------- -------- ------ ----- ---------- ---- -------- ---- - ------- - ------- ----- -
只需使用 @extend 关键字，您可以将 .btn 样式应用于另一个类 .submit 上。这将为提交按钮添加同样的背景颜色、字体颜色和字体大小。
总结
SASS 提供了更好的代码组织和更简洁的语法，同时也可以帮助你减少 CSS 文件的大小。使用 SASS 可以使你的代码更加可读、维护和扩展。除了在本篇文章中提到的功能之外，SASS 还有更多其他的特性可以探索，这将使你成为更为优秀的前端开发者。
示例代码
-- -------------------- ---- ------- -- -- ---- ---- --------------- -------- ----------------- -------- ------ ------------ - ------- --- ------ ------ -------------- ----- - ---- - ----------------- --------------- ------ ----- ---------- ---- -------- ---- -------- ------------- - ------- - ------- ----- -
-- -------------------- ---- ------- -- ---- --- -- ----- ------- - ----------------- -------- - ----- ------- - ------ ----- - ----- ------- - ---------- ---- - ----- ------- - -------- ---- - ----- ------- - ------- --- ------ ------ -------------- ----- - ------- - ----------------- -------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2c6e0f6b2d6eab3e0bfa2