concatenate SASS variable names using interpolation

Asked Aug 04 '20 at 14:06

Active Aug 04 '20 at 14:24

Viewed 41 times

I have a hundreds of SASS variables in the following format:

$color-apples-bg: red;
$color-apples-fg; white;
$color-bananas-bg: yellow;
$color-bananas-fg: black;
$color-cherries-bg: burgundy;
$color-cherries-fg: white;

I'm trying to concatenate and interpolate the correct variable name like so:

$fruits: apples, bananas, cherries;

@each $name in $fruits {
  body.#{$name} {
    background-color: $color-#{$name}-bg;
    color: $color-#{$name}-fg;
  }
}

However, this results in an error on compile. Is it possible to do this some way?

edited Aug 04 '20 at 14:24

asked Aug 04 '20 at 14:06

user1444027

4,983
7
29
39

What is the error? – underscore_d Aug 04 '20 at 14:12
@underscore_d I'm seeing undefined variable 'background-color: $color-#{name}-bg;' – user1444027 Aug 04 '20 at 14:17
1

Don't you need to write `#{$name}` in all cases, never `#{name}`? You did it right once but then wrong twice, AFAICS. – underscore_d Aug 04 '20 at 14:18
@underscore_d sorry, mistyped in my example - have updated. – user1444027 Aug 04 '20 at 14:24
What does the error say? – Daniel_Knights Aug 04 '20 at 14:27
Please copy and paste the exact code and error, otherwise people waste their time reacting to typos occurring during transcription. – underscore_d Aug 04 '20 at 14:29
@Daniel_Knights it says `Error: Undefined variable. background-color: $color-#{$name}-bg;` and `$color-` is highlighted – user1444027 Aug 04 '20 at 14:29
I haven't tried concatenating Sass variables before but it looks like that could be why. Maybe try it with CSS variables and see if it works that way? – Daniel_Knights Aug 04 '20 at 14:32
You can't do variable interpolation as of https://sass-lang.com/documentation/interpolation – Reda Meskali Aug 04 '20 at 14:39
The best way right now is to use maps – Reda Meskali Aug 04 '20 at 14:43
Does this answer your question? [Creating or referencing variables dynamically in Sass](https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass) – Arkellys Aug 05 '20 at 07:22

concatenate SASS variable names using interpolation

0 Answers0