1、自动生成宽度类名
$width-name:300,100; @each $name in $width-name { .w#{$name}{ width:$name + px; } };
//以上代码将会生成
.w300{ width:300px; }; .w100{ width:100px; }
2、自动生成间距类名
$margin-name:( mt:(16,24,10), mb:(16), ml:(16,18), mr:24 ); @each $name,$value in $margin-name{ @if type-of($value) == list{ @each $val in $value{ @if $name == 'mt'{ .#{$name}#{$val}{ margin-top:$val + px; } }@else if $name == 'mb' { .#{$name}#{$val}{ margin-bottom:$val + px; } }@else if $name == 'ml' { .#{$name}#{$val}{ margin-left:$val + px; } }@else{ .#{$name}#{$val}{ margin-right:$val + px; } } } }@else{ @if $name == 'mt'{ .#{$name}#{$value}{ margin-top:$value + px; } }@else if $name == 'mb' { .#{$name}#{$value}{ margin-bottom:$value + px; } }@else if $name == 'ml' { .#{$name}#{$value}{ margin-left:$value + px; } }@else{ .#{$name}#{$value}{ margin-right:$value + px; } } } }
//太多了,截图了一部分效果图
标签:scss,遍历,name,val,px,.#,value,margin,类名 From: https://www.cnblogs.com/jzm2842688813/p/18080324