在scss中使用hash

嗨，我有很多颜色的变量。所以我想这样做：

$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}

我该怎么做呢

---

谢谢

尽管很难过，但你不能。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”

SASS 3.3更新
使用sass 3.3中的一些新功能，您可以选择您的变量名，并消除恼人的

nth（）

原创
这有点痛苦，但你可以通过一个列表，然后通过循环来解决问题。
例如：

$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
}

---

我们在scss文件中有相同的支持吗extension@Jazmin对你可能应该看看下面艾伦·霍特尔的答案，它实际上应该被标记为正确答案

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

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