Sass Loop Through配列と現在の変数

Question

バックグラウンドカラーを変更するためにカラーリストをループしています。しかし、以下は失敗する。

$speech-bubble-default: $colors-chalk; 
$speech-bubble-blush: $colors-blush; 
$speech-bubble-brick: $colors-brick; 
$speech-bubble-pink: $colors-pink; 
$speech-bubble-slate: $colors-slate; 

$colors-list: blush brick default pink slate; 

    @each $current-color in $colors-list { 
    &.speech-bubble--#{$current-color} { 
     background-color: $speech-bubble--#{$current-color}; 

     &::after { 
     border-bottom-color: $speech-bubble--#{$current-color}; 
     } 
    } 
    } 

'Error: Undefined variable: "$speech-bubble--"

ループでこの作業を取得する方法はありますか？

Answer 1

私はあなたがこれをよりシンプルにする必要があると思います。私は色を管理するためのリストを作成します。これにより、変数を適切に作成してコードを繰り返さないようにします。

$colors-list:(
    default: 'chalk', 
    blush: 'blush', 
    brick: 'brick', 
    pink: 'pink', 
    slate: 'slate' 
); 

あなたはその機能に色の名前を分離するためにもっと説明とセマンティック方法をしたい場合は、このような色の変数のネストされたリストの操作を行うことができます

$chalk: 'chalk'; 
    $blush: 'blush'; 
    $brick: 'brick'; 
    $pink: 'pink'; 
    $slate: 'slate'; 


$colors-list:(
    default: $chalk, 
    blush: $blush, 
    brick: $brick, 
    pink: $pink, 
    slate: $slate 
); 

問題であなたのコードは、補間によって変数を参照しようとしています。#{}とvariable name interpolationは、SASSではサポートされていません。変数は全体の名前で呼び出されます。あなたはまた、色リストを繰り返しています。

なぜ：

@each $key,$val in $colors-list{ 
    .speech-bubble--#{$key} { 
    background-color: #{$val}; 
    } 
}