Urichalex
@Urichalex
Кратко о себе)

Можно ли сформировать имя переменной в SASS из других переменных конкатенацией?

Есть набор переменных, в которых хранятся цвета:
$neutral-10: #14191f;
$neutral-20: #333333;
$neutral-30: #3D4A5C;
$neutral-40: #52637A;
$neutral-50: #667B99;
$neutral-60: #8596AD;
$neutral-70: #a3b0c2;
$neutral-75: #A3B3C2;
$neutral-80: #C2CAD6;
$neutral-82: #C4C4C4;
$neutral-83: #D1D9E0;
$neutral-85: #DAE0E7;
$neutral-86: #E0E5EB;
$neutral-87: #F4F7FB;
$neutral-90: #F6F7F9;
$neutral-95: #F0F2F5;

Хочу сделать классы для цвета текста, чтобы было так
.text-neutral-10 {
    color: $neutral-10;
}

Но писать для каждого класса - городить кучу строк. Не хочу. Хочу сделать чтото типа такого
$neutrals:(10,20,30,40,50,60,70,75,80,82,83,85,86,87,90,95);

@each $key in $neutrals{
  .text-neutral-#{$key} {
    color: ${$neutral-}$key
  }
}

Можно ли такое сделать, и если можно, то как?
Спасибо
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
@bogomazov_vadim
$neutral-10: #14191f;
$neutral-20: #333333;
$neutral-30: #3D4A5C;

$neutrals: ("10": $neutral-10, "20": $neutral-20, "30": $neutral-30);

@each $key, $color in $neutrals {
  .text-neutral-#{$key} {
    color: $color;
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы