Wie erstelle ich eine dynamische Farbliste mit SASS?

Question

Ich möchte eine benutzerdefinierte Farbliste mit SASS erstellen.

$color-list: cyan blue; 
$cyan-codes: #B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1; 
$blue-codes: #B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1; 

@for $i from 1 through 6 { 
@each $color in $color-list { 
.color-#{$color}-#{$i*100} { 
    color: nth(AAA, $i); 
} 
} 
} 

Alles ist OK außer dem color: nth(AAA, $i); Teil. Was soll ich anstelle von AAA verwenden, um auf jede Farbcodeliste zu zeigen. Es funktioniert, wenn ich color: nth($cyan-codes, $i); verwenden, aber ich möchte eine dynamische Nutzung erstellen $ Cyan-Codes zu zeigen, blau-Codes $ ... usw.

Die CSS-Ausgabe, wie das ist:

.color-cyan-100 { 
    color: #B2EBF2; 
} 

.color-blue-100 { 
    color: #B2EBF2; 
} 

.color-cyan-200 { 
    color: #80DEEA; 
} 

.color-blue-200 { 
    color: #80DEEA; 
} 
... 

Answer 1

Sie können nicht Verwenden Sie Variableninterpolation, um eine Variable aufzurufen, leider. Ihre beste Wette ist, SASS maps zu verwenden. Hier ist ein kleines Beispiel dafür, was man tun könnte:

$my-colours: (// Define your colour map 
    'cyan': (#B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1), 
    'blue': (#B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1) 
); 

@each $map in $my-colours { 
    $name: nth($map, 1); // Returns the name of the map 
    $map: map-get($my-colours, $name); // Returns a sub-map 
    $i: 0; // For your class naming 

    @each $colour in $map { 
     $i: $i+1; // Increase the iteration value 

     .color-#{$name}-#{$i*100} { 
      color: $colour; 
     } 
    } 
} 

Answer 2

jaKhris ‚s Antwort ist gut, aber man könnte es ein wenig vereinfachen und müssen nicht den Überblick über die Iteration zu halten. Hier ist ein sassmeister

$my-colours: (
    'cyan': (#B2EBF2 #80DEEA #4DD0E1 #26C6DA #00BCD4 #00ACC1), 
    'blue': (#B2EBF2 #80DEEA #4DD0E1 #26C6DA #00BCD4 #00ACC1) 
); 

@each $map in $my-colours { 
    $name: nth($map, 1); 
    $list: map-get($my-colours, $name); 

    @for $i from 1 through length($list) { 
     .color-#{$name}-#{$i}00 { 
      color: nth($list, $i); 
     } 
    } 
}