SCSS for、each循环

for循环

$colors: 
	(key: default, value: gray),
    (key: red, value: red),
    (key: orange, value: orange),
    (key: yellow, value: yellow),
    (key: cyan, value: cyan),
    (key: blue, value: blue),
    (key: purple, value: purple);

@mixin color($key, $val) {
    .color-#{$key} {
        color: $val;
    }
}

@for $i from 1 through length($colors) {
    $item: nth($colors, $i);
    @include color(map-get($item, key), map-get($item, value));
}

each循环

$colors: 
	(key: default, value: gray),
    (key: red, value: red),
    (key: orange, value: orange),
    (key: yellow, value: yellow),
    (key: cyan, value: cyan),
    (key: blue, value: blue),
    (key: purple, value: purple);

@mixin color($key, $val) {
    .color-#{$key} {
        color: $val;
    }
}

@each $item in $colors {
    @include color(map-get($item, key), map-get($item, value));
    
    //$i: index($colors, $item); //获取下标
}