A
A
Alexander Urich2021-07-07 12:23:55
Sass
Alexander Urich, 2021-07-07 12:23:55

Is it possible to form a variable name in SASS from other variables by concatenation?

There is a set of variables that store colors:

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

I want to make classes for text color so that it is like this
.text-neutral-10 {
    color: $neutral-10;
}

But to write for each class is to fence a bunch of lines. I do not want. I want to do something like this
$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
  }
}

Can this be done, and if so, how?
Thanks

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vadim Bogomazov, 2021-07-07
@Urichalex

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question