16

次のように、変数と文字列を新しい変数にマージしたい:

$product_bodyclass_list: class1 class2 class3 class4;

$product_class1_color: #C00;
$product_class2_color: #00C;
$product_class3_color: #0C0;
$product_class4_color: #000;

@each $bodyclass in $product_bodyclass_list {
    .page-#{$bodyclass} {
        a {
            color: $product_#{$bodyclass}_color; // This is wrong
        }
    }
}

誰もこれを行う方法を知っていますか?

4

2 に答える 2

26

いいえ、動的変数を持つことはできません。

ドキュメントから：

#{} 補間を使用して、セレクターとプロパティ名で SassScript 変数を使用することもできます

2 つのリストとnth()関数を使用して、同じ効果を実現できます。

$products: class1, class2, class3, class4;    
$product_colors: #C00, #00C, #0C0, #000;

$i: 1;
@each $class in $products {
    .page-#{$class} {
        a {
            color: nth($product_colors, $i)
        }
    }
  $i: $i + 1;
}

@forまた、次のディレクティブを使用する方がクリーンな場合があります。

@for $i from 1 through length($products) {
    .page-#{nth($products, $i)} {
        a {
            color: nth($product_colors, $i)
        }
    }
}

さらに、変数を明示的に定義して他の場所で使用できるようにする場合は、変数のリストを作成します。

$product_class1_color: #C00;
$product_class2_color: #00C;
$product_class3_color: #0C0;
$product_class4_color: #000;

$product_colors: $product_class1_color, $product_class2_color, $product_class3_color, $product_class4_color;
于 2013-04-03T13:28:55.900 に答える
4

更新：Sassマップにより、この回答はほとんど時代遅れになります。

もう 1 つのオプションは、それぞれ 2 つの要素を持つ 1 つのリストを使用し、それをハッシュマップとして使用することです。

$products: class1 #C00, class2 #00C, class3 #0C0, class4 #000;

@each $kvp in $products { // kvp stands for 'key-value pair'
    .page-#{nth($kvp, 1)} {
        a {
            color: nth($kvp, 2);
        }
    }
}

コードの意味をより明確にするために、単純な関数を作成するのが好きです。私はおそらくもっと似たようなことをするでしょう:

@function kvp-key($kvp) {
    @return nth($kvp, 1);
}

@function kvp-value($kvp) {
    @if length($kvp) == 2 {
        @return nth($kvp, 2);
    } @else {
        @warn "argument was not a key-value pair";
        @return null;
    }
}

そして、次のようにループを再実装します。

@each $kvp in $products { // kvp stands for 'key-value pair'
    .page-#{kvp-key($kvp)} {
        a {
            color: kvp-value($kvp);
        }
    }
}

行は保存していませんが、ループの意図を少し明確にしています。

于 2013-07-31T18:51:28.173 に答える