Sass Mixin с несколькими переменными, прикрепленными к тому же стилем

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; 
    } 
}