如何在当前 SASS map/dictionary 中引用另一个值？

Question

我有一张 SASS 颜色图，我希望某些颜色仅引用地图中的另一种颜色。

例如

$colors: (
     special-red: #a82523,
     red: special-red
)

但是，当我运行这个的时候，map-get($colors, red)的值就是字面上的special-red。我希望值为 #a82523.

你是怎么做到的？

Answer 1

当您的地图未进行事件初始化时，无法添加键。您可以将该值分配给变量 $special-red: #a82523;然后在地图中分配它

$special-red: #a82523;
$colors: (
     special-red: $special-red,
     red: $special-red
)

但如果你真的想这样做，那么你可以创建一个 mixin 并通过它查找

$colors: (
    special-red: #009CDC,
    red: special-red
);

@mixin themeColor1($color) {
  $mapColor: map-get($colors, $color);
  @if map-has($mapColor) {
    color: map-get($colors, $mapColor)
  } @else {
    color: map-get($colors, $color)
  }
}

.my-class {
  @include themeColor1(red);
}

.my-class2 {
  color: map-get($colors, special-red);
}

但我的建议是方法 1，设置变量

如何在当前 SASS map/dictionary 中引用另一个值？

How do I reference another value in the current SASS map/dictionary?

dictionary

sass

scss-mixins