Sass-@while

@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。

这里有一个 @while 指令的简单用例：

//SCSS

$types: 4;

$type-width: 20px;

@while $types > 0 {

    .while-#{$types} {

        width: $type-width + $types;

    }

    $types: $types - 1;

}

编译出来的 CSS

.while-4 {

  width: 24px;

}

.while-3 {

  width: 23px;

}

.while-2 {

  width: 22px;

}

.while-1 {

  width: 21px;

}

巴特西

Sass-@while

最新文章

热门文章