SASS Mixin - Use variables to populate class name

Question

I have several colours set up as classes

.black {background: $black;};
.red {background: $red;}
.yellow {background: $yellow;}
.grey {background: $grey;}
.white {background: $white;}
.blue {background: $blue;}
.full-black {background: #000;}
.light-black {background: #222;}

but i want to create a mixin which takes the class name and automatically creates the class name and fills in the background colour so i don't have to type this out every time..

I have tried something like this

@mixin colours ($black,$full-black,$light-black,$red,$blue,$yellow,$white,$grey) {
    .(colours): background:{colours};
}

But can't figure out the right code.

http://stackoverflow.com/a/16126625/2168947 – Brewal Feb 23 '15 at 10:47 — Brewal, Feb 23 '15 at 10:47
Are you looking for an answer in Less also? Please clarify. – Harry Feb 23 '15 at 10:53 — Harry, Feb 23 '15 at 10:53
You dont need a mixin but each, look at my response ;) – Pik_at Feb 23 '15 at 10:58 — Pik_at, Feb 23 '15 at 10:58

score 2 · Accepted Answer · answered Feb 23 '15 at 10:56

you should use "associative array" to define the name of your colors and the code:

$colors: ("emerald": "#2ecc71", "carrot": "#e67e22");

@each $name, $hexa in $colors {
    .#{$name} {
      color: #{$hexa};
    }
}

I made a simple codepen to show you: http://codepen.io/pik_at/pen/MYGJqY

SASS Mixin - Use variables to populate class name

1 Answers1