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

Ya, this is quite some time from the op, but thought, I'd add it anyway :)

This is what you are looking for with the least amount of repetition. You can just add new colors to your $eric-holmes-colors array and recompile.

$eric-holmes-colors: "blue", "red", "white", "black";

@each $color in $eric-holmes-colors {
    .#{$color}-bg {
        background-color: #{$color};
    }
    .#{$color}-border {
        border-color: #{$color};
    }
}