想知道是否可以使用带有SASS的数组,因为我发现自己重复以下类型的事情:

.donkey
  h2
    background-color= !donkey

.giraffe
  h2
    background-color= !giraffe

.iguana
  h2
    background-color= !iguana
有帮助吗?

解决方案

不,这是不可能的。最好的方法是定义混合物:

+animal-h2(!name, !color)
  .#{name} h2
    background-color= !color

然后,您可以每条样式有一行,而不是三行:

+animal-h2("donkey", !donkey)
+animal-h2("giraffe", !giraffe)
+animal-h2("iguana", !iguana)

其他提示

绝对地。

$animals: "donkey", "giraffe", "iguana"
@foreach $animal in $animals
  .#{$animal}
    h2
      background-color: !#{$animal}

NEX3的答案是正确的。要使此与SASS在Rails 3.1上合作,我需要在CSS.SCSS文件中使用以下内容:

$donkey: #CC4499;

@mixin animal-h2($name, $color) {
  .#{$name} h2 {
    background-color: $color;
  }
}

@include animal-h2("donkey", $donkey);
@include animal-h2("horse", #000);

哪个输出:

.donkey h2 {
    background-color: #CC4499;
}

.horse h2 {
    background-color: black;
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top