css - 如何从 scss mixin 更改另一个变量中使用的变量值

Question

我试图从 mixin 更改另一个变量中使用的变量，但我无法更改变量值。

$color: white !default;
$var: "this #{$color} is a test" ;

@mixin test($value, $color) {
  // here how to override the $color value
  color: $value;
}

.a {
  @include test($var, #ccc);
}

默认情况下，该$color值为白色，并且此$color变量用于另一个变量$var。

当我通过$var内部一个 mixin 来改变它的变量 ( $color) 值时，它并没有改变。有人请为此提出解决方案吗？

预期输出：

.a {
  color: "this #ccc is a test";
}

提前致谢。

Answer 1

当您将$var变量作为参数传递时，它的值不会更新，因为它已经被分配了。在 mixin 中传递新$color变量不会更新变量。一种解决方法是使用该set-nth函数将白色替换为在 mixin 中传递的颜色：

$color: white !default;
$var: #{$color}, red;

@mixin test($value, $colour) {
  // here how to override the $color value
  $var: set-nth($value, 1, $colour);
  color: $var;
}

.a {
  @include test($var, #ccc);
}