如何在SCSS中动态解析并插值引用变量？

你当前的代码将变量名拼接成了字符串，SCSS不会自动解析字符串为变量值，所以输出的是变量名字符串而非实际颜色。以下是两种可行的解决方法：

方案一：使用SCSS映射（Map）管理颜色（推荐） #

把分散的颜色变量统一存入一个Map结构，遍历的时候直接获取对应的颜色值，代码更简洁易维护：

// 定义颜色映射
$colors: (
  primary: #558bc3 !default,
  success: #259d2c !default,
  info: rgba(43, 169, 251, 0.39) !default,
  warning: #FAAA00 !default,
  danger: #c82e2d !default,
  inverse: #000
);

// 遍历生成样式
@each $color-name, $color-value in $colors {
  .bg-#{$color-name} {
    background-color: $color-value;
  }
  .color-#{$color-name} {
    color: $color-value;
  }
}

编译后会直接输出实际颜色值，比如：

.bg-primary {
  background-color: #558bc3;
}
.color-primary {
  color: #558bc3;
}
/* 其他颜色样式类似 */

方案二：保留原有变量结构，动态引用变量 #

如果不想改动现有的单个变量定义，可以使用Dart Sass提供的get-variable函数（需确保使用的是Dart Sass 1.23+版本），结合variable-exists检查变量是否存在，避免报错：

$colorsList: "primary" "success" "info" "warning" "danger" "inverse";

$primary-color: #558bc3 !default;
$success-color: #259d2c !default;
$info-color: rgba(43, 169, 251, 0.39) !default;
$warning-color: #FAAA00 !default;
$danger-color: #c82e2d !default;
$inverse-color: #000;

@each $color in $colorsList {
  $var-name: #{$color}-color;
  // 检查变量是否存在，避免引用不存在的变量报错
  @if variable-exists($var-name) {
    $color-value: get-variable($var-name);
    .bg-#{$color} {
      background-color: $color-value;
    }
    .color-#{$color} {
      color: $color-value;
    }
  }
}

这种方式会根据拼接的变量名字符串，动态获取对应的变量值，输出正确的颜色样式。

内容的提问来源于stack exchange，提问作者Barry Chapman