多应用+插件架构,代码干净,支持一键云编译,码云点赞13K star,4.8-4.12 预售价格198元 广告
#### 1.4 each循环 each 循环指令的形式: ~~~ @each $var in <list>{ class类名{ 样式 } } ~~~ $var 就是一个变量名,<list> 是一个 SassScript 表达式,他将返回一个列表值。**each表达式里面的class类的样式转化成css时会单独显示出来** 例子: sass样式 ~~~ $list: 1 2 3 4 5 6;//<list>的表达式 @mixin author-images { @each $author in $list {//each表达式 .photo-#{$author} {//将会调用$list 冒号后面的值 background: url("/images/avatars/#{$author}.png") no-repeat; } } } .author-bio { @include author-images; } ~~~ 转化成css ~~~ .author-bio .photo-1 { background: url("/images/avatars/1.png") no-repeat; } .author-bio .photo-2 { background: url("/images/avatars/2.png") no-repeat; } .author-bio .photo-3 { background: url("/images/avatars/3.png") no-repeat; } .author-bio .photo-4 { background: url("/images/avatars/4.png") no-repeat; } .author-bio .photo-5 { background: url("/images/avatars/5.png") no-repeat; } .author-bio .photo-6 { background: url("/images/avatars/6.png") no-repeat; } ~~~