关于scss手动遍历生成类名
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; } } } }
//太多了,截图了一部分效果图