Question

我使用sass打印带有@each和@for循环的列表中的值但是当我尝试逐个打印并在css中编译收集的值时即使使用nth('', $n)函数，它也会获取列表中的所有值。我使用以下code和gulp作为我的任务选手。

＆＃13;

// SASS CODE
$btn-default: darken(#DDD, 5%);
$btn-alert: red;
$btn-class: "btn-default", "btn-alert";
$btn-color: $btn-default, $btn-alert;

@each $btn in $btn-class {
    .#{unquote($btn)} {
        @for $i from 1 through length($btn-color) {
            background-color: nth($btn-color, $i);
        }
    }
}


/* CSS CODE : OUTPUT */
.btn-default {
  background-color: #d0d0d0;
  background-color: red; }

.btn-alert {
  background-color: #d0d0d0;
  background-color: red; }

＆＃13;

我在sass中以不同方式尝试的项目中有点陷入困境，当我没有得到这些值时，它只会返回错误。

Answer 1

不要引入内部@for循环，而是在每个规则集中不可避免地呈现两个属性，请尝试使用单个循环：

@for $i from 1 through length($btn-class) {
  #{nth($btn-class, $i)} {
    background-color: nth($btn-color, $i)
  }
}

从长远来看，我建议改用地图。通过这种方式，您可以在类名和颜色之间建立明确的关联，从而避免在较大的元素列表中出现潜在错误：

$buttons: (
  btn-default: $btn-default,
  btn-alert: $btn-alert
);

@each $class, $color in $buttons {
  .#{$class} {
    background-color: $color;
  }
}

SASS | @for和@each循环打印列表中的值问题

1 个答案: