在变量中使用SCSS变量

Question

我想要使用以下的 SCSS 循环：

@each $var in dark, purple, green, cyan, silver, white {

  .text-#{$var} {
    color: nth($color-, $var);
  }
  .btn-#{$var} {
    background-color: nth($color-, $var);
  }
}

为了使用以下变量：

$color-dark: #0D0E1E;
$color-purple: #333366;
$color-green: #33cc99;
$color-cyan: #00cccc;
$color-silver: #ccc;
$color-white: #fff;

但它并没有起作用。 $color-#{$var} 也不起作用。我能这样做吗？

- masfmqowkf

---

可能是在Sass中动态创建或引用变量的重复问题。 - fubar

Answer 1

nth 用于获取列表中的项。第一个参数是列表，第二个参数是列表中的索引。此外，SASS 认为任何带有 $ 的内容都是变量，因此 $color- 是一个变量。你没有将 $color- 定义为变量，这也不是你想要使用它的方式。

文档.

但是你可以通过 map 获取到你想要的结果...

演示

$color-dark: #0D0E1E;
$color-purple: #333366;
$color-green: #33cc99;
$color-cyan: #00cccc;
$color-silver: #ccc;
$color-white: #fff;

$colors: (
  dark: $color-dark,
  purple: $color-purple,
  green: $color-green,
  cyan: $color-cyan,
  silver: $color-silver,
  white: $color-white
);

@each $name, $val in $colors {
  .text-#{$name} {
    color: $val;
  }

  .btn-#{$name} {
    background-color: $val;
  }
}

- Ari