Question

我想用SASS创建一个自定义颜色列表。

$color-list: cyan blue;
$cyan-codes: #B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1;
$blue-codes: #B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1;

@for $i from 1 through 6 {
@each $color in $color-list {
.color-#{$color}-#{$i*100} {
  color: nth(AAA, $i);
}
}
}

除color: nth(AAA, $i);部分外，其他任何事情都可以。我应该使用什么而不是AAA来指向每个颜色代码列表。如果我使用color: nth($cyan-codes, $i);它会工作，但我想创建一个动态用法来指向$ cyan-codes，$ blue-codes等等。

CSS输出是这样的：

.color-cyan-100 {
  color: #B2EBF2;
}

.color-blue-100 {
  color: #B2EBF2;
}

.color-cyan-200 {
  color: #80DEEA;
}

.color-blue-200 {
  color: #80DEEA;
}
...

Answer 1

遗憾的是，您不能使用变量插值来调用变量。最好的办法是使用SASS maps。以下是您可以做的一个小例子：

$my-colours: ( // Define your colour map
   'cyan': (#B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1),
   'blue': (#B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1)
);

@each $map in $my-colours {
    $name: nth($map, 1); // Returns the name of the map
    $map: map-get($my-colours, $name); // Returns a sub-map
    $i: 0; // For your class naming

    @each $colour in $map {
        $i: $i+1; // Increase the iteration value

        .color-#{$name}-#{$i*100} {
            color: $colour;
        }
    }
}

Answer 2

jaKhris答案很好，但您可以稍微简化一下，而不必跟踪迭代。这是sassmeister

$my-colours: (
   'cyan': (#B2EBF2 #80DEEA #4DD0E1 #26C6DA #00BCD4 #00ACC1),
   'blue': (#B2EBF2 #80DEEA #4DD0E1 #26C6DA #00BCD4 #00ACC1)
);

@each $map in $my-colours {
    $name: nth($map, 1);
    $list: map-get($my-colours, $name);

    @for $i from 1 through length($list) {
        .color-#{$name}-#{$i}00 {
          color: nth($list, $i);
        }
    }
}

如何使用SASS创建动态颜色列表？

2 个答案: