SCSS：ControlDirectives根据条件生成不同的样式

大前端 scss

发布时间 : 2026-03-01 00:00

字数:169 阅读 :

**SCSS（Sass）语言内置的控制指令（Control Directives）**用于在 SCSS 编译阶段根据条件生成不同的 CSS 代码

指令	作用	示例
`@if` / `@else if` / `@else`	条件判断	`@if $theme == dark { ... }`
`@for`	循环（数字范围）	`@for $i from 1 through 5 { .item-#{$i} { width: 10px * $i; } }`
`@each`	遍历列表或 map	`@each $color in red, blue, green { .btn-#{$color} { background: $color; } }`
`@while`	while 循环（少用）	`@while $i < 10 { ... }`

@if 条件 {
  // 条件为真时输出的 CSS
} @else if 其他条件 {
  // ...
} @else {
  // 默认情况
}

@for $i from 1 through 12 {
  .col-#{$i} {
    width: (100% / 12) * $i;
  }
}

自动生成 .col-1 到 .col-12 的宽度类。

$themes: (
  primary: #007AFF,
  success: #4CD964,
  error: #FF3B30
);

@each $name, $color in $themes {
  .btn-#{$name} {
    background: $color;
  }
}

生成 .btn-primary, .btn-success, .btn-error。