条件与循环

预处理器的条件和循环实现动态样式生成，减少重复代码。

Sass 条件判断

@if / @else if / @else

@mixin button-size($size) {
  @if $size == small {
    padding: 4px 8px;
    font-size: 12px;
  } @else if $size == medium {
    padding: 8px 16px;
    font-size: 14px;
  } @else if $size == large {
    padding: 12px 24px;
    font-size: 16px;
  } @else {
    @warn "Unknown size: #{$size}";
  }
}

.btn-small { @include button-size(small); }
.btn-medium { @include button-size(medium); }
.btn-large { @include button-size(large); }

三元条件

$theme: dark;

.text {
  color: if($theme == dark, white, black);
}

Sass 循环

@for 循环

// 包含结束值
@for $i from 1 through 5 {
  .col-#{$i} {
    width: 20% * $i;
  }
}
// 生成 .col-1 到 .col-5

// 不包含结束值
@for $i from 1 to 5 {
  .item-#{$i} {
    margin-left: 10px * $i;
  }
}
// 生成 .item-1 到 .item-4

@while 循环

$i: 1;
@while $i <= 5 {
  .level-#{$i} {
    font-size: 12px + $i * 2;
  }
  $i: $i + 1;
}

@each 循环

// 遍历列表
$colors: primary, success, warning, danger;

@each $color in $colors {
  .btn-#{$color} {
    background: var(--#{$color}-color);
  }
}

// 遍历 Map
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

@each $name, $value in $breakpoints {
  @media (min-width: $value) {
    .container-#{$name} {
      max-width: $value - 30px;
    }
  }
}

Less 条件判断

守卫条件（Guard）

// Mixin 守卫
.button(@size) when (@size = small) {
  padding: 4px 8px;
  font-size: 12px;
}
.button(@size) when (@size = medium) {
  padding: 8px 16px;
  font-size: 14px;
}
.button(@size) when (@size = large) {
  padding: 12px 24px;
  font-size: 16px;
}

.btn-small { .button(small); }

条件运算符

.mixin(@value) when (@value > 10) {
  font-size: @value;
}
.mixin(@value) when (@value <= 10) {
  font-size: 10px;
}

// 支持的运算符
// =, >, >=, <, <=
// and, or, not
// isnumber, iscolor, isstring, iskeyword

Less 循环

Less 使用递归实现循环：

// 生成 1-5 的间距类
.generate-spacing(@n, @i: 1) when (@i =< @n) {
  .mt-@{i} { margin-top: @i * 4px; }
  .generate-spacing(@n, @i + 1);
}

.generate-spacing(5);
// 生成 .mt-1 到 .mt-5

遍历列表

@colors: primary, success, warning;

.each-color(@list, @i: 1) when (@i =< length(@list)) {
  @color: extract(@list, @i);
  .btn-@{color} {
    background: @@color;
  }
  .each-color(@list, @i + 1);
}

.each-color(@colors);

实用示例

网格系统

// Sass 生成栅格系统
$columns: 12;

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

// 生成
// .col-1 { width: 8.333%; }
// .col-2 { width: 16.667%; }
// ...
// .col-12 { width: 100%; }

主题颜色

$themes: (
  light: (
    bg: #fff,
    text: #333,
    border: #eee
  ),
  dark: (
    bg: #222,
    text: #fff,
    border: #444
  )
);

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

状态样式

$states: (
  primary: blue,
  success: green,
  warning: orange,
  danger: red
);

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

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

    &:active {
      background: darken($color, 20%);
    }
  }
}

响应式工具类

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px
);

$properties: (
  p: padding,
  m: margin
);

@each $bp-name, $bp-value in $breakpoints {
  @media (min-width: $bp-value) {
    @for $i from 0 through 5 {
      @each $abbr, $prop in $properties {
        .#{$abbr}-#{$bp-name}-#{$i} {
          #{$prop}: $i * 1rem;
        }
      }
    }
  }
}

// 生成
// @media (min-width: 576px) {
//   .p-sm-0 { padding: 0; }
//   .p-sm-1 { padding: 1rem; }
//   ...
// }

要点总结

• Sass 条件：@if、@else if、@else，三元函数 if()
• Sass 循环：@for、@while、@each
• Less 条件：Mixin 守卫 when
• Less 循环：递归 Mixin 实现
• 常用于：栅格系统、主题样式、工具类批量生成