Sass 是一种 CSS 预处理器，它为编写 CSS 提供了一些方便易用的工具。Sass 在前端开发中广泛应用，能够帮助我们提高效率，减少代码冗余。下面列出了 9 个 Sass 技巧，希望对你在前端开发中的工作和学习有所帮助。
1. 变量和嵌套
Sass 支持变量的定义，这使得我们可以在代码中复用某个值而不必一遍遍地输入它。同时，Sass 还支持变量的嵌套。下面是一个例子：
-- -------------------- ---- -------
----- --------
---------- -----
------- -
----------------- ----------
------- -
----------------- ----------------- -----
-
-在这个例子中，我们定义了一个 $red 变量保存了红色的十六进制颜色值，然后用 $bg-color 变量来表示按钮的背景颜色。在 $bg-color 变量中使用 $red 变量，这样我们就可以在不同的声明中复用这个值。此外，在 .button 类选择器内，我们使用了 Sass 支持的嵌套语法，以简化代码，并且使 CSS 样式更加清晰和易于维护。
2. 混合器
Sass 的混合器将一组 CSS 样式封装成一个函数，可以在其它样式中重用它们。在 Sass 中，使用 @mixin 关键字定义一个混合器。下面是一个例子：
@mixin text-shadow($x, $y, $color) {
text-shadow: $x $y 0 $color;
}
h1 {
@include text-shadow(1px, 1px, #000);
}在上面的例子中，我们定义了一个 text-shadow 混合器，它接受三个参数：阴影的水平偏移量 $x、垂直偏移量 $y，以及阴影颜色 $color。然后，在 h1 元素的样式中，我们使用 @include 关键字添加了这个混合器。
3. 继承
在 Sass 中，我们可以通过 @extend 关键字将一个选择器上的样式继承到另一个选择器上。这个特性可以避免重复的样式，并在我们的代码中创建了基础样式，以便我们可以快速修改某些元素的样式。下面是一个例子：
-- -------------------- ---- -------
--------------- -
----------------- -----
------ ------
------- -----
------- -
----------------- ------------ -----
-
-
----------------- -
------- ----------------
----------------- ----
-在上面的例子中，我们定义了一个基础的 .primary-button 样式。然后，在 .secondary-button 样式中，我们使用 @extend 关键字继承了 .primary-button 样式，并覆盖了 background-color 样式，将其更改为红色。
4. 条件语句
Sass 的 @if 语句允许我们根据条件设置样式。下面是一个例子：
-- -------------------- ---- -------
------ ----------------- ----- -
--- ----- -- ---- -
----------- --- --- ---- ------- -- -- ----
- ----- -
----------- -----
-
-
--- -
-------- -------------
-在上面的例子中，我们定义了一个 box-shadow 混合器，它接受一个名为 $bool 的参数。如果 $bool 为 true，则添加 box-shadow 样式，否则设置为 none，@else 指令判断 $bool 参数的值。然后我们使用 @include 关键字添加了这个混合器。
5. 循环语句
Sass 提供了 @for 循环和 @each 循环，使我们可以重新使用某一类样式而不必手动复制粘贴它们。下面是一个例子：
-- -------------------- ---- -------
---- -- ---- - ------- -- -
---------- -
------ ------------- - ----
-
-
-------- -
---------- -----
------------ ------
----------- ---
--
----- ----- ------ -- ------- -
------------- -
------ -------
-
-在上面的例子中，我们使用了 @for 循环创建了 1 至 10 的十个样式类名，每个样式设置宽度为网格系统的一部分。在使用 '#{variable}' 语法拼接样式和循环自变量 $i 的值，使每个样式名称都不同。然后，在 @each 循环样式中，我们使用 $colors 映射循环，将颜色值复制到类名中，以创建三个不同的文本颜色。
6. 函数
Sass 提供了一些内置函数和我们可以定义自己的函数，函数的作用与 JavaScript 中的函数类似，可以帮助我们实现各种功能。下面是一个例子：
@function em($px, $base: 16) {
@return #{$px / $base}em;
}
p {
font-size: em(16);
}在上面的例子中，我们定义了一个 em() 函数，它接收两个参数：一个表示像素值的 $px 变量和一个可选的 $base 变量，表示基础像素值 16px。然后使用 $px / $base 计算出我们需要的 em 值，并使用 @return 关键字将其返回。最后，我们在 p 样式中使用了 em() 函数，用于设置字体大小。
7. 运算符
Sass 支持算术运算、比较运算和逻辑运算，我们可以使用这些运算符轻松计算样式表中的值。下面是一个例子：
$width: 1000px;
$sidebar-width: 300px;
main {
width: $width - $sidebar-width;
}在上面的例子中，我们使用算术运算符 - 将 $sidebar-width 变量从 $width 变量中减去，并将结果分配给 width 样式。
8. Math 函数
Math 函数是一组由 Sass 提供的可以在样式表中执行数学操作的函数。下面是一个例子：
.container {
width: math.div(960px, 12);
}
.box {
width: math.div(math.mul(100%, 3), 12);
}在上面的例子中，我们使用 math.div() 函数和 math.mul() 函数计算元素的宽度。math.div 函数用于将第一个参数除以第二个参数，math.mul 函数用于将第一个参数乘以第二个参数。
9. 颜色函数
Sass 提供了一系列的颜色函数，可以用于创建新的颜色、更改颜色、混合颜色等。下面是一个例子：
$base-color: #201e1d;
.btn {
background-color: lighten($base-color, 10%);
border-color: darken($base-color, 5%);
}在上面的例子中，我们使用了 lighten() 和 darken() 函数改变颜色的亮度。这些函数接收两个参数：颜色值和一个百分比值，lighten() 函数将颜色变亮，darken() 函数将颜色变暗。
结论
通过掌握这些 Sass 技巧，我们可以更快、更方便地编写 CSS 样式表。在开发中，它们可以帮助我们提高生产率，减少代码冗余。希望这些技巧对你的 Sass 学习和前端开发工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747d0ff5883fc5ebfe40f60