Creating or referencing variables dynamically in Sass

Question

I\'m trying to use string interpolation on my variable to reference another variable:

// Set up variable and mixin
$         


        

Answer 1

I came across the need to reference a colour dynamically recently.

I have a _colours.scss file for every project, where I define all my colours once and reference them as variables throughout.

In my _forms.scss file I wanted to setup button styles for each colour available. Usually a tedious task. This helped me to avoid having to write the same code for each different colour.

The only downside is that you have to list each colour name and value prior to writing the actual css.

// $red, $blue - variables defined in _colours.scss
$colours: 
  'red' $red,
  'blue' $blue;

@each $name, $colour in $colours {
  .button.has-#{$name}-background-color:hover {
    background-color: lighten($colour, 15%);
  }
}