@while 流程控制指令

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环。

用 sass 实现 bootstrap 中 css 的一段功能

css 代码

css

.col-sm-12 {
  width: 100%;
}
.col-sm-11 {
  width: 91.66666667%;
}
.col-sm-10 {
  width: 83.33333333%;
}
.col-sm-9 {
  width: 75%;
}
.col-sm-8 {
  width: 66.66666667%;
}
.col-sm-7 {
  width: 58.33333333%;
}
.col-sm-6 {
  width: 50%;
}
.col-sm-5 {
  width: 41.66666667%;
}
.col-sm-4 {
  width: 33.33333333%;
}
.col-sm-3 {
  width: 25%;
}
.col-sm-2 {
  width: 16.66666667%;
}
.col-sm-1 {
  width: 8.33333333%;
}

用@while实现

scss

$i: 12;
@while $i>0 {
  .col-sm-#{$i} {
    width: (100 / (12 / $i)) #{"%"};
  }
  $i: $i - 1;
}

@while 流程控制指令 ​

@while 流程控制指令