Вопрос по – Динамический вызов переменных в SCSS [дубликат]

4

This question already has an answer here:

Creating or referencing variables dynamically in Sass 5 answers

У меня есть ряд переменных цвета для моего сайта, которые нумеруются:

$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. такой же, как тот, что между синим, который не такой же, как тот, что для зеленых и т. д.)

Ваш Ответ

1   ответ
5

Во-первых, причина, по которой предлагаемый вами синтаксис не работает, заключается в том, что когда интерполяции включены в значения свойств, текст вокруг него (такой как символ «$») интерпретируется как простой 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 () основаны на одном, а не на нуле.)

Изучение списков SASS и их функций недавно изменило мою жизнь.
Это то, что я в итоге сделал. Работает угощение. futuraprime

Похожие вопросы