CSS 是编写网页样式必须掌握的一门技术，但是随着项目的复杂度增加，CSS 代码的维护难度也会不断增加。此时使用 Sass 可以大大提高我们编写 CSS 的效率，使代码更加优雅简洁。
Sass 是什么？
Sass 是一种 CSS 预处理器，它允许我们使用变量、嵌套规则、Mixin、函数等高级特性，使 CSS 的代码更易于维护、易于拓展以及易于阅读和理解。
Sass 可以通过编写 Sass 代码后编译为 CSS，然后再嵌入到 HTML 中使用，也可以在项目中直接使用 Sass。
Sass 使用
变量
当我们需要在多个地方使用同一个颜色或者尺寸时，通过 Sass 变量可以很方便地实现。
// 定义变量
$primary-color: #2c3e50;
// 使用变量
.button {
background-color: $primary-color;
}嵌套规则
在 CSS 中，当需要为某一个元素设置多层样式时，我们需要通过选择器不断嵌套。而在 Sass 中，我们可以使用嵌套规则来实现相同的效果，让代码更加简洁易读。
.nav {
ul {
padding: 0;
li {
display: inline-block;
}
}
}Mixin
Sass 的 Mixin 功能类似于函数，可以将样式代码单独抽离出来，提高代码的复用性。
-- -------------------- ---- -------
-- -- -----
------ ---------------------- -
---------------------- --------
-------------- --------
-
-- -- -----
---- -
-------- --------------------
----------------- ---------------
-继承
通过 Sass，我们可以实现样式代码的继承，大大简化样式的编写。
-- -------------------- ---- ------- -- ---- ------ - ----------------- --------------- ------- --- ----- ----- - -- ---- ---- - ------- ------- ------ ----- ------- ------ -
函数
Sass 还提供多个内置的函数，可以用于颜色、字符串、数字的操作。
// 调用内置函数
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 20px;
// 自定义函数
@function rem($pxval) {
@return $pxval / 16 * 1rem;
}总结
使用 Sass 可以大大提高我们编写 CSS 的效率和代码质量。上述只是其中的部分功能介绍，Sass 还有很多其他高级特性和用法可以学习和掌握，让我们的前端项目更加优秀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e31e08f6b2d6eab3e7c36b