htmlcsssassdynamic-variables

Generate a dynamic SCSS variable by appending another variable


I'm trying to assign different colors to similar items using an SCSS @for loop. Can I append the $i variable used in the @for loop to $color-?

<div>
  <h1>Hello</h1>
  <h1>World</h1>
  <h1>Goodbye</h1>
</div>
$color-1: red;
$color-2: blue;
$color-3: yellow;

@for $i from 1 to 3 {
  div>h1:nth-child(#{$i}) {
    color: $color-{$i};
  }
}

Solution

  • I don't know about dynamic variable names, but the standard way to achieve what you want is SCSS lists, over which you can iterate.

    $colors-list: red blue yellow;
    
    @each $current-color in $colors-list {
        $i: index($colors-list, $current-color);
        div>h1:nth-child(#{$i}) { 
            color: $current-color;
        }
    }
    

    which compiles to

    div > h1:nth-child(1) {
      color: red;
    }
    
    div > h1:nth-child(2) {
      color: blue;
    }
    
    div > h1:nth-child(3) {
      color: yellow;
    }