如何在SCSS混合宏中修改被嵌套引用的变量值？

你遇到的这个坑其实是SCSS变量插值的时机特性导致的——当你定义$var: "this #{$color} is a test"时，SCSS在编译这个变量的瞬间就把当时的$color值（white）直接替换进字符串里了，后续无论怎么修改$color，已经生成的$var内容都不会再更新。

问题根源拆解 #

原来的代码里，$var是一个静态字符串，它的内容在定义时就被固定下来了，和$color后续的变化完全无关。你把$var传入混合宏时，传递的只是"this white is a test"这个固定字符串，自然看不到颜色变化。

解决方案1：用动态函数替代静态变量 #

把$var改成一个函数，这样每次调用它时都会重新读取当前的$color值，实现动态插值：

$color: white !default;

// 用函数生成动态字符串
@function get-test-text() {
  @return "this #{$color} is a test";
}

@mixin test($value, $new-color) {
  // 如果需要修改全局$color，加上!global标记
  $color: $new-color !global;
  color: $value;
}

.a {
  @include test(get-test-text(), #ccc);
}

编译后.a的样式会是：

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

解决方案2：让函数接收参数（更推荐，避免污染全局变量） #

如果不想修改全局的$color，可以让函数直接接收颜色参数，完全隔离变量作用域：

$color: white !default;

// 函数接收自定义颜色参数
@function get-test-text($custom-color) {
  @return "this #{$custom-color} is a test";
}

@mixin test($value) {
  color: $value;
}

.a {
  @include test(get-test-text(#ccc));
}

这个方案更干净，不会影响全局的$color变量，同时能灵活生成需要的字符串内容。

内容的提问来源于stack exchange，提问作者Yahwe Raj