SASSでダイナミックカラーリストを作成する方法は？

Question

SASSでカスタムカラーリストを作成したいと思います。

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

color: nth(AAA, $i);部分を除いてOKです。各カラーコードリストを指すためにAAAの代わりに何を使用すべきですか？私はcolor: nth($cyan-codes, $i);を使用しますが、私は$シアン・コードを指すように動的な使用を作成したい場合には、

CSSの出力はそのようであるなど...青コードを$働いている：

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

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

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

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

Answer 1

あなたがすることはできません変数補間を使って変数を呼び出す、悲しいことに。あなたの最善の策はSASS mapsです。

$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の答えは良いですが、あなたはそれを少し簡略化し、反復を追跡する必要はありませんでした。ここでは、何ができるかの小さな例です。ここをクリック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); 
     } 
    } 
}