using hash with scss

Question

hi i have many variables with colors. so want do something like this:

$culture: #00CC66;
$party:#CC9900;

 @each $i in culture, party {
.bl_#{$i}{
   border-         


        

Answer 1

As sad as it is, you can't. SASS will only parse your file once, so even if you do something like this :

$culture: #00CC66;
$party:#CC9900;

@each $i in culture, party {
  .bl_#{$i}{
     border-left-color: #{'$' + $i};
  }
}

You will end up with the following CSS :

.bl_culture {
  border-left-color: $culture; }

.bl_party {
  border-left-color: $party; }

Your best bet is probably to change your code for something like :

.bl {
  [...]

  &.culture {
    border-left-color: #00CC66
  }
  &.party {
    border-left-color: #CC9900
  }
}

And then use something like class="bl culture" instead of class="bl_culture".