SASS 控制指令详解
SASS 提供了多种控制指令，如 @for、@if 和 @each，这些指令可以让你在样式表中编写更复杂和动态的逻辑。下面分别详细介绍这些指令的使用方法和示例。
1. @for 循环
@for 循环用于生成一系列重复的样式规则。它可以有两种形式：from ... through 和 from ... to。
@for $variable from <start> through <end> {
// 循环体
}
@for $variable from <start> to <end> {
// 循环体
}
/*
$variable：循环变量。
<start>：循环的起始值。
<end>：循环的结束值（包含在内）。
*/from ... through：包含结束值。from ... to：不包含结束值。
示例
// 生成一系列边框半径类
@for $i from 2 through 20 {
.br-#{$i*2} {
border-radius: 2rpx * $i;
}
}
// 生成一系列宽度类
@for $i from 1 to 11 {
.w-#{$i*10} {
width: 10% * $i;
}
}编译后的 CSS
/* 圆角 */
.br-4 {
border-radius: 4rpx;
}
.br-6 {
border-radius: 6rpx;
}
/* ...省略中间部分... */
.br-40 {
border-radius: 40rpx;
}
/*宽*/
.w-10 {
width: 10%;
}
.w-20 {
width: 20%;
}
/* ...省略中间部分... */
.w-100 {
width: 100%;
}2. @if 条件语句
@if 语句用于根据条件生成不同的样式规则。可以与 @else if 和 @else 一起使用。
@if <condition> {
// 条件为真时的样式
}
@else if <condition> {
// 条件为真时的样式
}
@else {
// 所有条件都不为真时的样式
}示例
$theme: light;
body {
@if $theme == light {
background-color: white;
color: black;
} @else if $theme == dark {
background-color: black;
color: white;
} @else {
background-color: gray;
color: black;
}
}编译后的 CSS
body {
background-color: white;
color: black;
}3. @each 循环
@each 循环用于遍历列表或映射（map），并为每个项生成样式规则。
@each $variable in <list-or-map> {
// 循环体
}示例
// 遍历颜色列表
$colors: red, green, blue;
@each $color in $colors {
.bg-#{$color} {
background-color: $color;
}
}
// 遍历映射
$breakpoints: (
small: 480px,
medium: 768px,
large: 1024px
);
@each $name, $width in $breakpoints {
@media (min-width: $width) {
.#{$name}-screen {
width: 100%;
}
}
}编译后的 CSS
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
.bg-blue {
background-color: blue;
}
@media (min-width: 480px) {
.small-screen {
width: 100%;
}
}
@media (min-width: 768px) {
.medium-screen {
width: 100%;
}
}
@media (min-width: 1024px) {
.large-screen {
width: 100%;
}
}4. @while 指令
@while 指令在 SASS 中用于创建基于条件的循环。与 @for 不同，@while 循环会一直执行，直到指定的条件不再满足为止。这使得 @while 在某些情况下非常有用，尤其是在需要动态生成不确定数量的样式规则时。
$variable: initial-value;
@while <condition> {
// 循环体
// 更新变量
}$variable：初始化变量(就是个变量名，可以是任何名字，例如 aa,bb,cc)。<condition>：循环条件，当条件为真时继续执行循环体。- 更新变量：在循环体中更新变量的值，以确保最终能够退出循环。
示例
生成一系列背景颜色
假设我们想生成一系列带有不同背景颜色的类，每种颜色的透明度逐渐增加。
$i: 1;
$opacity-step: 0.1;
/* 声明两个变量 */
@while $i <= 10 {
.bg-#{$i} {
/* 让$1 * $opacity-step */
background-color: rgba(0, 0, 255, $i * $opacity-step);
}
$i: $i + 1;
/* 让$1 每次循环 +1 */
}编译后的 CSS
.bg-1 {
background-color: rgba(0, 0, 255, 0.1);
}
.bg-2 {
background-color: rgba(0, 0, 255, 0.2);
}
.bg-3 {
background-color: rgba(0, 0, 255, 0.3);
}
/* ... */
.bg-10 {
background-color: rgba(0, 0, 255, 1);
}假设我们想生成一系列宽度类，每个类的宽度逐渐增加。
$i: 1;
$width-step: 10%;
@while $i <= 10 {
.w-#{$i} {
width: $i * $width-step;
}
$i: $i + 1;
}编译后的 CSS
.w-1 {
width: 10%;
}
.w-2 {
width: 20%;
}
.w-3 {
width: 30%;
}
/* ... */
.w-10 {
width: 100%;
}注意事项
- 更新变量：在
@while循环中，必须确保在每次迭代中更新条件变量，否则可能会导致无限循环。 - 条件表达式：条件表达式必须返回一个布尔值（真或假），通常使用比较运算符（如
<=、>=、==等）。
总结
@for循环：用于生成一系列重复的样式规则，支持from ... through和from ... to两种形式。@if条件语句：根据条件生成不同的样式规则，可以与@else if和@else一起使用。@each循环：用于遍历列表或映射，并为每个项生成样式规则。@while循环：用于创建基于条件的循环，直到条件不再满足为止。- 语法：
@while <condition> { ... } - 示例：生成一系列背景颜色和宽度类。
- 注意事项：确保在每次迭代中更新条件变量，避免无限循环。
