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);
    }
  }
}

编辑：您无法以所需的方式连接变量，所以这就是我提出此解决方案的原因。