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

Question

[Александр Урих]

Есть набор переменных, в которых хранятся цвета:

$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
  }
}

Можно ли такое сделать, и если можно, то как?
Спасибо

Answer 1

[Vadim Bogomazov]

$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;
  }
}

Comments

[Александр Урих]

Так я тоже могу). Но так придется перечислять все в $neutrals. Хотелось бы меньшим кодом

[Vadim Bogomazov]

Александр Урих, динамически генерить наименования переменных в sass нельзя, пользуйся мапами.
Есть еще такой вариант.
https://krasimirtsonev.com/blog/article/SASS-inter...

[Александр Урих]

Vadim Bogomazov, понял. Спасибо. Буду использовать map