css - 是否可以在 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 属性的值，并将该片段放入 @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; }