控制指令与表达式

Sass - 控制指令与表达式 (Control Directives & Expressions)

Sass 提供了控制指令，允许你根据 SassScript 表达式有条件地或重复地包含样式。这些是强大的工具，常用于 mixins 和函数中，能够生成动态且复杂的样式表。

@if / @else if / @else

@if 指令评估一个 SassScript 表达式。如果表达式返回 true（或除了 false 或 null 之外的任何值），则其块内的样式会被输出。你可以链式使用 @else if 处理多个条件，并以可选的 @else 块结束，用于处理默认情况。

语法：

@if condition1 {
  // 如果 condition1 为 true 的样式
} @else if condition2 {
  // 如果 condition1 为 false 且 condition2 为 true 的样式
} @else {
  // 如果所有先决条件都为 false 的样式
}

示例：创建主题样式。

$theme: light;

.widget {
  border: 1px solid;
  @if $theme == dark {
    background-color: #333;
    color: #eee;
    border-color: #555;
  } @else if $theme == sepia {
    background-color: #f4ecd8;
    color: #5b4636;
    border-color: #d8c8a8;
  } @else {
    // 默认的浅色主题
    background-color: #fff;
    color: #333;
    border-color: #ccc;
  }
}

if() 函数

Sass 还提供了一个三元 if(condition, value-if-true, value-if-false) 函数，对于根据条件将两个值之一赋给变量或属性很有用。

$text-color: if($theme == dark, white, black);

.element {
  color: $text-color;
}

@for

@for 指令创建一个循环，通常用于根据数字序列生成样式。它使用一个计数器变量，在指定的范围内递增（或递减）。

语法：

// 'through' 包含结束值
@for $var from <start> through <end> {
  // 使用 #{$var} 的样式
}

// 'to' 不包含结束值
@for $var from <start> to <end> {
  // 使用 #{$var} 的样式
}

示例：生成网格列类。

$grid-columns: 12;

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

编译后的 CSS (部分)：

.col-1 {
  width: 8.3333333333%;
}
.col-2 {
  width: 16.6666666667%;
}
/* ... 直到 .col-12 */
.col-12 {
  width: 100%;
}

@each

@each 指令遍历列表中的项或 map 中的对。它对于根据值的集合生成样式的变体非常有用。

语法 (List)：

@each $var in <list> {
  // 使用 #{$var} 的样式
}

语法 (Map)：

@each $key, $value in <map> {
  // 使用 #{$key} 和 #{$value} 的样式
}

示例 (List)：生成背景颜色工具类。

$colors: primary, secondary, success, danger, warning, info;
$color-map: (
  primary: blue,
  secondary: gray,
  success: green,
  danger: red,
  warning: orange,
  info: teal
);

@each $name in $colors {
  .bg-#{$name} {
    background-color: map-get($color-map, $name);
  }
}

示例 (Map)：生成社交媒体按钮样式。

$social-colors: (
  twitter: #1DA1F2,
  facebook: #1877F2,
  linkedin: #0A66C2
);

@each $network, $color in $social-colors {
  .button--#{$network} {
    background-color: $color;
    color: white;

    &:hover {
      background-color: darken($color, 10%);
    }
  }
}

@while

@while 指令只要其条件评估为 true，就会继续输出样式。它不如 @for 或 @each 常用，因为你通常需要手动管理循环变量以避免无限循环。

语法：

@while condition {
  // 样式
  // 确保更新条件中使用的变量！
}

示例：生成字体大小递减的标题样式。

$level: 6;
$font-size: 1rem;

@while $level > 0 {
  h#{$level} {
    font-size: $font-size;
  }
  $level: $level - 1;
  $font-size: $font-size * 1.2; // 为下一级别增大字体大小
}

用例 (Use Cases)

控制指令对于以下方面至关重要：

• 创建主题和变体。
• 生成工具类。
• 构建复杂的网格系统。
• 编写基于输入进行调整的灵活 mixins。
• 自动化重复的 CSS 模式。

请深思熟虑地使用它们，以保持 Sass 代码的可读性和可维护性。过度使用有时可能导致过于复杂且难以调试的 CSS。