@each的作用:循环一个list 或者一个map
示例一:
循环一个list: 类名为 icon-20px 、icon-22px、icon-24px写他们的字体大小写法就可以如下:
$sizes:20px,22px,24px;
@each $size in $sizes {
.icon-#{$size} {
font-size:$size
}
}
示例二
循环一个map:类名为icon-primary、icon-success、icon-secondary等,但是他们的值又都是变量,写法如下:
$blue: #0d6efd !default;
$gray-600: #6c757d !default;
$green: #52c41a !default;
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$theme-colors:(
"primary":$primary,
"secondary":$secondary,
"success":$success
);
@each $key,$val in $theme-colors {
.icon-#{$key} {
color: $val;
}
}