Accessing the name of the variable rather than its value

Question

I am trying to write a loop that will cycle through colors and condense the amount of code in my scss file. Here is a simple example of what I have:

$color1:         


        

Answer 1

According to the sass-reference your code should look like this, but i haven´t tried it myself.

@each $color in $color1, $color2, $color3, $color4 {
  .#{$color}-bg { background-color: $color;}
  .#{$color}-border { border-color: $color;}
}

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#control_directives