5

私のサイトには、番号が付けられた一連の色変数があります。

$red-1: #821B0D;
$red-2: #B13631;
$red-3: #D75B5B;
$red-4: #F18788;
$red-5: #FDB9B0;

次のように、それらを動的に呼び出すミックスインを設定したいと思います。

@mixin link($color-name) {
    color: $#{$color-name}-2;
    &:hover {
        color: white;
        background-color: $#{$color-name}-4;
    }
}

しかし、このように変数を呼び出す方法がわかりません。（上記の構文は機能しません。）

（明白な提案を回避するために：私の色は線形彩度または明度の変化によって設定されていないため、SASSの色関数を使用していません。SASSでプログラムで生成することはできません。ステップ間の赤の明度シフトはそうではありません青の間のものと同じで、緑などのものと同じではありません）

4

1 に答える 1

6

まず、提案された構文が機能しない理由は、補間がプロパティ値に含まれている場合、その周囲のテキスト（「$」記号など）がプレーンCSSとして解釈されるためです。これは、補間に関するSASSリファレンスに記載されています。

代わりにSASSリストを使用することをお勧めします。このようなものはあなたが求めている機能をあなたに与えるでしょう：

@mixin link($color) {
    color: nth($color, 2);
    &:hover {
        color: white;
        background-color: nth($color, 4);
    }
}

$red: (#821B0D, #B13631, #D75B5B, #F18788, #FDB9B0);

.test {
    @include link($red);
}

（ nth（）関数に渡されるインデックス値は、ゼロベースではなく、1ベースであることに注意してください。）

于 2012-05-21T01:21:13.897 に答える