使用哈希与scss

如何解决使用哈希与scss

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

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

然后使用like5ѭ代替

class=\"bl_culture\"

。     ,        SASS 3.3更新 使用sass 3.3的一些新功能，您可以选择变量名并消除烦人的ѭ7

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

原版的 这有点麻烦，但是您可以通过列表来解决问题，然后循环遍历。 例如：

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