Sass@规则-流程控制

Sass支持全部的CSS的@规则

• @if、@else、@else if
• @for：
  @for $i from <start> through <end>或@for $i from <start> to <end>

1. $i 表示变量、start 表示起始值、end 表示结束值
2. 关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数

//.scss
@for $i from 1 through 2 {
  .item-#{$i} { width: 2em * $i; }
}
//.css
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}

• @while

常使用@each或@for会更好，对读者来说更清晰，而且通常编译起来也更快

• @each

$sizes: 40px, 50px, 80px;//逗号或空格分隔开的为列表

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}