#### 1.3while函数 定义:@while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值**为 false 时停止循环**。这个和 @for 指令很相似,只要 @while 后面的**条件为 true 就会执行** **while循环格式:** ~~~ @while(循环条件判断){ 执行代码; 跳出循环条件; } ~~~ 流程图 ![](https://box.kancloud.cn/08dc2d525067f11e0c1ec2b4b9aaea9d_298x337.png) 列:sass样式 ~~~ $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; } ~~~