Sass 是一种 CSS 预处理器，它为 CSS 提供了许多扩展语法，可以让我们编写出更加灵活、高效的样式表。本文将介绍 Sass 中的基础知识：变量、循环和条件。
变量
在 Sass 中可以使用变量来保存一些值，这些值可以在样式表中重复使用，让样式表变得更加简洁易读。定义 Sass 变量时需要使用 $ 符号：
$primary-color: #007bff;
上面的代码定义了一个名为 primary-color 的变量，它的值为蓝色（#007bff）。我们可以在样式表中使用这个变量：
a {
color: $primary-color;
}这样就可以将所有链接的颜色设置为蓝色。
循环
循环是 Sass 中比较常用的一种语法，可以循环遍历数组、列表等数据类型，使得样式表更加灵活。Sass 中有两种循环方式：@for 和 @each。
@for 循环
@for 循环可以循环遍历数字，形式为：
@for $i from 1 through 5 {
// 循环操作
}上面的代码会循环遍历 $i 从 1 到 5 的数字，包括边界。
可以使用 $i 变量来表示循环的当前值。
下面的代码演示了如何使用 @for 循环来设置不同颜色的列表：
$colors: red, green, blue;
@for $i from 1 through length($colors) {
li:nth-child(#{$i}) {
background-color: nth($colors, $i);
}
}上面的代码会循环遍历 $colors 数组，将每一个元素作为背景色应用到相应的列表项上。
@each 循环
@each 循环可以循环遍历数组、列表等数据类型，形式为：
@each $item in $list {
// 循环操作
}上面的代码会循环遍历 $list 中的每一个元素，使用 $item 变量表示当前元素的值。
下面的代码演示了如何使用 @each 循环来快速生成一组样式类：
$class-list: btn-danger, btn-success, btn-warning;
@each $class in $class-list {
.#{$class} {
color: white;
}
}上面的代码会循环遍历 $class-list 数组，使用 $class 变量表示每一个元素，然后在样式表中生成相应的样式类。
条件
条件语句在 Sass 中同样是一种常用的语法，可以帮助我们根据不同的条件应用不同的样式。Sass 中有两种条件语句：@if 和 @else。
@if 语句
@if 语句可以根据一个表达式的结果来选择是否应用某个样式，形式为：
@if 表达式 {
// 执行代码
}以下的代码演示了如何根据 $bg-color 变量的值来选择背景色：
-- -------------------- ---- -------
--- --------- -- ----- -
---- -
----------------- ----
-
- ----- -- --------- -- ------- -
---- -
----------------- ------
-
- ----- -- --------- -- ------ -
---- -
----------------- -----
-
- ----- -
-- ----
-上面的代码会根据 $bg-color 变量的值来选择不同的背景色。
@else 语句
@else 语句可用于在 @if 之后指定一个默认的选项，形式为：
@if 表达式 {
// 执行代码
} @else {
// 默认代码
}以下的代码演示了如何根据当前时间来选择背景色：
-- -------------------- ---- -------
------ ---
--- ----- - -- -
---- -
----------------- ------
-
- ----- -
---- -
----------------- -----
-
-上面的代码会根据当前时间来选择不同的背景色。
结论
本文介绍了 Sass 中的三个基本语法：变量、循环和条件。它们使得样式表更加灵活、高效、易读。掌握了这些基础知识，您就可以开始使用 Sass 编写更加强大的样式表了！
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748750993696b0268f7cc74