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中完成的事情。我认为萨斯只会看到你所拥有的一个列表项目，里面有两个项目列表。

以下是我认为你要做的事情：

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

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

1 个答案: