sass $ 用插值连接

Question

我有以下 SASS 个变量：

$msg: #669bdf;
$msg-h:  #548ed8;
$msg-a: #3873be;
$suc: #1cBB9c;
$suc-h: #10b091;
$suc-a: #10947a;

如何正确无误地将 $ 与插值连接起来

@each $color in $color-list {
  .#{$color} {
    background-color: #{$#{$color}};
    &:hover {
      background-color: #{$#{$color}}-h;
    }
    &:active {
      background-color: #{$#{$color}}-a;
    }
  }
}

Answer 1

我认为以下内容可能对您有用：

$color-list: (
  msg: (
  base: #669bdf,
  hover: #548ed8,
  active: #3873be
  ),
  suc: (
  base: #1cBB9c,
  hover: #10b091,
  active: #10947a
  )
);

@each $name, $colors in $color-list {
  .#{$name} {
    background-color: map-get($colors, base);
    &:hover {
      background-color: map-get($colors, hover);
    }
    &:active {
      background-color: map-get($colors, active);
    }
  }
}

编辑：你不能按照你想要的方式连接变量，所以这就是我想出这个解决方案的原因。

sass $ 用插值连接

sass $ concatenate with interpolation

interpolation

sass