CODEWITHSUNDEEP
sass
Everest
Everest

Reputation: 607

Sass mixin with multiple variables attached to the same style

I have a Sass list of class name and color:

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

What I'm currently doing is looping through each line and applying that style to that color

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

I now want the ability to be able to pass multiple class names that corresponds to that color that would output something like this:

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

Where the list would now look like:

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

I think it would much cleaner if I do it with a mixin that accepts multiple parameters, but how do I do it?

Thanks!

Upvotes: 0

Views: 354

Answers (1)

cimmanon
cimmanon

Reputation: 68309

Use another list.

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

Alternately, just have the first element in your list be the selector:

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

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

Upvotes: 1

Related Questions