Question

我有一个类名和颜色的Sass列表：

$txt-colors: 
         "music" $color-orange,
         "video" $color-green,
         "photo" $color-blue;

我目前正在做的是循环每一行并将该样式应用于该颜色

@each $color in $txt-colors {
   ".#{nth($color, 1)}" {
       color: nth($color, 2);
   }
}

我现在希望能够传递多个类名，这些类名对应于输出这样的颜色：

.music, .instrument {
   color: $color-orange;
}

现在列表如下：

$txt-colors: 
         "music" "instrument" $color-orange,
         "video" $color-green,
         "photo" $color-blue;

我认为如果我使用一个接受多个参数的mixin来做得更清楚，但我该怎么做？

谢谢！

Answer 1

使用其他清单。

$txt-colors: 
         ("music" "instrument") orange,
         "video" green,
         "photo" blue;

@each $classes, $color in $txt-colors {
    $sel: ();
    @each $c in $classes {
        $sel: append($sel, '.#{$c}', comma);
    }
    #{$sel} {
        color: $color;
    }
}

或者，只需让列表中的第一个元素成为选择器：

$txt-colors: 
         ".music, .instrument" orange,
         ".video" green,
         ".photo" blue;

@each $sel, $color in $txt-colors {
    #{$sel} {
        color: $color;
    }
}

Sass mixin将多个变量附加到相同的样式

1 个答案: