SCSS: wie dynamisch Variablen erstellen, die von Array

Question

Ich habe diese

 $colors: 
      "dark" #3E3E3E, 
      "darker" #3E3E3E, 
      "light" #ECECF0, 
      "green" #00A87B, 
      "yellow" #FFBB3B, 
      "red" #FF4633, 
      "white" #FFFFFF, 
      "black" #000000, 
      "blue" #436FB6 
     ; 


     @each $color in $colors{ 
      // .btn-color 
      .btn-#{nth($color, 1)}{ 
       background: nth($color, 2); 
       color: #fff; 
      } 
      // .color/color 
      .#{nth($color, 1)}, #{nth($color, 1)}{ 
       color: nth($color, 2) !important; 
       a{ 
        color: nth($color, 2); 
       } 
      } 
      // .color-bg 
      .#{nth($color, 1)}-bg { 
       background: nth($color, 2); 
      } 
     } 

Es erstellt dynamisch verschiedene Klassen. Wie kann ich diese erweitern Variablen für jedes $colors Beispiel zu machen - ich brauche $dark zu verwenden, um den dark Wert von $colors

Answer 1

zu erreichen Wenn Sie Farbvariationen automatisieren wollen empfehle ich Ihnen einen Blick in die native Farbfunktionen zu übernehmen zur Verfügung gestellt von Sass (http://sass-lang.com/documentation/Sass/Script/Functions.html). Hier

ist ein Beispiel auf einer Farbkarte basiert (IMO einfacher zu arbeiten mit im Vergleich zur Liste):

$colors:(
    green : #00A87B, 
    yellow : #FFBB3B, 
    red : #FF4633, 
    blue : #436FB6,  
    white : #FFFFFF, 
    black : #000000 
); 

@each $name, $color in $colors { 
    .color { 
    &-#{$name}{ 
     background-color: $color; 
     // create variations (if not black or white) 
     @if $color != white and $color != black { 
     &.extra-light { background-color: mix($color, white, 25%); } 
     &.light  { background-color: mix($color, white, 50%); } 
     &.semi-light { background-color: mix($color, white, 75%); } 
     &.extra-dark { background-color: mix($color, black, 25%); } 
     &.dark  { background-color: mix($color, black, 50%); } 
     &.semi-dark { background-color: mix($color, black, 75%); }    
     } 
    } 
    } 
} 

CSS Ausgabe

.color-green { background-color: #00A87B;} 
.color-green.extra-light { background-color: #bfe9de;} 
.color-green.light { background-color: #80d4bd;} 
.color-green.semi-light { background-color: #40be9c;} 
.color-green.extra-dark { background-color: #002a1f;} 
.color-green.dark { background-color: #00543e;} 
.color-green.semi-dark { background-color: #007e5c;} 

.color-yellow { background-color: #FFBB3B;} 
.color-yellow.extra-light { background-color: #ffeece;} 
.color-yellow.light { background-color: #ffdd9d;} 
.color-yellow.semi-light { background-color: #ffcc6c;} 
.color-yellow.extra-dark { background-color: #402f0f;} 
.color-yellow.dark { background-color: #805e1e;} 
.color-yellow.semi-dark { background-color: #bf8c2c;} 

.color-red { background-color: #FF4633;} 
.color-red.extra-light { background-color: #ffd1cc;} 
.color-red.light { background-color: #ffa399;} 
.color-red.semi-light { background-color: #ff7466;} 
.color-red.extra-dark { background-color: #40120d;} 
.color-red.dark { background-color: #80231a;} 
.color-red.semi-dark { background-color: #bf3526;} 

.color-blue { background-color: #436FB6;} 
.color-blue.extra-light { background-color: #d0dbed;} 
.color-blue.light { background-color: #a1b7db;} 
.color-blue.semi-light { background-color: #7293c8;} 
.color-blue.extra-dark { background-color: #111c2e;} 
.color-blue.dark { background-color: #22385b;} 
.color-blue.semi-dark { background-color: #325389;} 

.color-white { background-color: #FFFFFF;} 

.color-black { background-color: #000000;} 

Funktion basierter Ansatz:

$colors:(
    green : #00A87B, 
    yellow : #FFBB3B, 
    red : #FF4633, 
    blue : #436FB6,  
    white : #FFFFFF, 
    black : #000000 
); 


@function get-color($color, $variant: null){ 
    $color: map-get($colors, $color); 
    @return map-get((
    extra-light: mix($color, white, 25%), 
    light:  mix($color, white, 50%), 
    semi-light: mix($color, white, 75%), 
    semi-dark: mix($color, black, 75%),   
    dark:  mix($color, black, 50%),   
    extra-dark: mix($color, black, 25%) 
),$variant) or $color; 
} 



.class { color: get-color(green); } 
.class { color: get-color(green, semi-light); } 
.class { color: get-color(yellow, dark); }