SCSS 如何定义动态样式答案

【问题标题】：SCSS How to define dynamic stylesSCSS 如何定义动态样式
【发布时间】：2020-09-12 16:30:17
【问题描述】：

以下是我当前出现编译错误的代码。

$color-1: #353a4b;
$color-2: #5563a9;
$color-3: #7184e7;
$color-4: #c788e6;
$color-5: #f76789;

@for $i from 1 through 5 {
  .bg-color-#{$i} {
    background-color: $color-#{$i};
  }

  .fg-color-#{$i} {
    color: $color-#{$i};
  }
}

这给了我以下错误

SassError: Undefined variable: "$color-".

我想使用 sass @for 定义动态样式。

.bg-color-1 {
  background-color: $color-1;
}
.bg-color-2 {
  background-color: $color-2;
}

...

有人可以帮助我吗？提前致谢

【问题讨论】：

标签： css sass

【解决方案1】：

一个合适的解决方案是map variables 然后使用@each 循环来访问它们。 Codepen.

$colors: (
  color-1: #353a4b,
  color-2: #5563a9, 
  color-3: #7184e7, 
  color-4: #c788e6,
  color-5: #f76789,
);

@each $color in $colors {
  $index: index($colors, $color);
  $color: nth($color, 2);
  
  .bg-color-#{$index} {
    background-color: $color;
  }
  
  .fg-color-#{$index} {
    color: $color;
  }
}

【讨论】：

酷。真快！