Question

我正在努力使这个混音工作..任何想法如何动态地汇总变量名称并使其处理。

$colors: purple pink;

@each $color in $colors {

  .box--#{$color} {
    background-color: #{'$ui'}-$color;
  }

}

在这种情况下，$ui-red是一个红色变量。

Answer 1

不幸的是，您无法在运行时生成或引用sass单个变量。但是你可以将颜色代码和名称存储在sass地图中（需要sass v3.3）并在循环中使用它，如下所示：

$colors: ("purple": #f7f,
          "pink":   #ffa);

@each $color-name, $color-code in $colors {
  .box--#{$color-name} {
    background-color: $color-code;
  }
}

在CSS中你得到：

.box--purple {
  background-color: #f7f;
}

.box--pink {
  background-color: #ffa;
}

示例：http://www.sassmeister.com/gist/c1285109946e5207e441c7ee589dd382

使用字符串对循环变量进行Concancate以在运行中生成另一个变量

1 个答案: