Question

我在一个单独的$person-color文件中有变量$animal-color和variables.scss，我希望在main.scss文件中使用该文件。

我想要实现的是以下CSS：

.person-container {
    background: blue;
}

.animal-container {
    background: red;
}

我的SCSS如下所示：

$items: person animal;

@each $item in $items {
  .$item-container {
      background: #{$item}-color;
  }
}

这不会奏效。但我想在字符串#{$item}-color中扩展变量的值。有没有办法在不使用地图的情况下获得上面的输出？

Answer 1

部分需要以下划线开头。 _variables.scss或者它会编译成.css

<强> _variables.scss

$person: red;
$animal: blue;

<强> main.scss

@import 'variables';

$items: person $person, animal $animal;

@each $item in $items {
  $key: nth($item, 1);
  $value: nth($item, 2);

  .#{$key}-container {
      background: $value;
  }
}

编辑：现在应该给你正确的结果！

在SASS中使用字符串作为可变量

1 个答案: