Sass 将变量名插入字符串

Question

我们获得了许多与特定悬停状态颜色相关联的颜色：

$red: #cb333b;
$red-hover: #fe666e;
$brown: #544742;
$brown-hover: #877a75;
etc.

因为所有颜色的格式都是一样的，所以我希望写一个 mixin，它接受颜色的变量名，然后将 -hover 连接到最后。这是我的第一次尝试：

@mixin button_colorizor($color) {
  border-color: $color;
  color: $color;
  &:hover {
    color: #{$color}-hover;
    border-color: #{$color}-hover;
  }
}

但是它的作用是输出这样的颜色：#f1735f-hover。当我这样做时同样的事情：color: #{$color+-hover};

Answer 1

您可以创建颜色映射。并通过名称获取颜色值。

Demo 在 sassmeister 上。

$colors: (
  red: #cb333b,
  red-hover: #fe666e,
  brown: #544742,
  brown-hover: #877a75
);

@mixin button_colorizor($color) {
  color: map-get($colors, $color);
  border-color: map-get($colors, $color);

  &:hover {
    color: map-get($colors, $color + '-hover');
    border-color: map-get($colors, $color + '-hover');
  }
}

a {
  @include button_colorizor(red);
}

span {
  @include button_colorizor(brown);
}

此代码编译为css:

a {
  color: #cb333b;
  border-color: #cb333b;
}
a:hover {
  color: #fe666e;
  border-color: #fe666e;
}

span {
  color: #544742;
  border-color: #544742;
}
span:hover {
  color: #877a75;
  border-color: #877a75;
}

Sass 将变量名插入字符串

Sass interpolate a variable name to string

interpolation

sass

mixins