Sass Loop through array and present variable

css, sass

Solution

I think that you have to got this simpler. I would create a list to manage colors. This way you are properly creating variables and avoid repeating code.

$colors-list:(
  default: 'chalk',
  blush: 'blush',
  brick: 'brick',
  pink: 'pink',
  slate: 'slate'
);

If you want a more descriptive and semantic way to separate the name of the color to its functionality, you can do a nested list of variables of colors like this:

  $chalk: 'chalk';
  $blush: 'blush';
  $brick: 'brick';
  $pink: 'pink';
  $slate: 'slate';


$colors-list:(
  default: $chalk,
  blush: $blush,
  brick: $brick,
  pink: $pink,
  slate: $slate
);

The problem in your code is that you are trying to reference variables by interpolation `#{}` and variable name interpolation is not supported by SASS. Variables are called by its whole name. You also are repeating colors lists.

Why not:

@each $key,$val in $colors-list{
  .speech-bubble--#{$key} {
    background-color: #{$val};
  }
}

Problem

I am trying to loop through my color list in order to change the background color. But the following fails. ``` $speech-bubble-default: $colors-chalk; $speech-bubble-blush: $colors-blush; $speech-bubble-brick: $colors-brick; $speech-bubble-pink: $colors-pink; $speech-bubble-slate: $colors-slate; $colors-list: blush brick default pink slate; @each $current-color in $colors-list { &.speech-bubble--#{$current-color} { background-color: $speech-bubble--#{$current-color}; &::after { border-bottom-color: $speech-bubble--#{$current-color}; } } } ``` 'Error: Undefined variable: "$speech-bubble--" Is there a way to get this working in loop?

Original source