是否可以在 SASS 中取变量名？

Question

我尝试使用@each 或@for 循环使以下代码看起来更漂亮（没有任何可用的结果）。

.btn[data-btn-color="black"] {
    @include colored-btn($black);
}
.btn[data-btn-color="blue"] {
    @include colored-btn($blue);
}
.btn[data-btn-color="red"] {
    @include colored-btn($red);
}
// ... and more colors ...

我目前的方法是从变量中获取值，将其用作data-btn-color 属性的值，并将该sn-p 放入@each 循环中。

类似

@each $color in ($black, $blue) {
    @include colored-btn($color);
}

编译成：

.btn[data-btn-color="black"] {
  background-color: #000; // $black
}
.btn[data-btn-color="blue"] {
  background-color: #00f; // $blue
}

有什么功能可以让我做这样的事情吗？

Answer 1

你离得太近了！您不希望 () 围绕您想要在 @each 中经历的内容。我认为 Sass 只会将您拥有的内容视为一个列表项，其中包含两个项目列表。

这就是我认为你正在尝试做的事情：

$red: #f00;
$blue: #00f;
$black: #000;

$colors:  red $red, blue $blue, black $black;

@mixin colored-button($background-color: #000){
  background-color: $background-color;
}

@each $color in $colors {
  $name: nth($color, 1);
  $hex: nth($color, 2);
  .btn[data-btn-color="#{$name}"]{
    @include colored-button($hex);
  }
}

这会导致：

.btn[data-btn-color="red"] {
  background-color: red; }

.btn[data-btn-color="blue"] {
  background-color: blue; }

.btn[data-btn-color="black"] {
  background-color: black; }