используя хэш с scss

Question

привет, у меня много переменных с цветами. так хочется сделать что-то вроде этого:

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

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

для печати:

bl_culture{border-left-color:#00cc66}
bl_party{border-left-color:#cc9900}

Как это можно сделать?

спасибо

Answer 1

SASS 3.3 ОБНОВЛЕНИЕ
С некоторыми новыми функциями из sass 3.3 вы можете выбрать имена переменных и избавиться от надоедливых nth()

@each $name, $color in(
    'red'   $red,
    'green' $green,
) {
    .color-#{$name} {
        background-color: $color;
    }
}

ORIGINAL
Это немного больно, но вы можете обойтись списком, а затем просмотреть его.
Например:

$colorList:
    "red"    $red,
    "green"  $green
;

@each $i in $colorList{
    .color-#{nth($i,1)}{
         background-color:nth($i,2);
    }
}

Предопределив эти цветовые вариации в другом месте, вы получите:

.color-red{
   background-color:#FF0000
}

.color-green{
   background-color:#00FF00
}

Answer 2

Как ни печально, ты не можешь. SASS проанализирует ваш файл только один раз, поэтому даже если вы сделаете что-то вроде этого:

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

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

Вы получите следующий CSS:

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

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

Лучше всего, вероятно, изменить код на что-то вроде:

.bl {
  [...]

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

А затем используйте что-то вроде class="bl culture" вместо class="bl_culture".