LESS中如何将字符串与变量拼接后输出为变量？

Got it, you want to dynamically reference an existing variable by combining strings and a variable, instead of just getting the concatenated string result. Let's break down how to do this in common scenarios:

你提到的 ~"@color-@{state}" 会输出字符串，但你需要的是对应变量的值对吧？这本质是动态变量引用的需求，不同环境下的实现方式如下：

场景1：Less预处理器 #

在Less中，你可以直接用嵌套插值的方式来动态引用变量，不需要转义成字符串：

// 先定义你的状态颜色变量
@color-active: #ff4444;
@color-inactive: #44ff44;
@color-disabled: #cccccc;

// 假设你的state变量是当前状态，比如'active'
@state: active;

// 直接通过嵌套插值获取对应变量的值
@current-color: @{'color-'@{state}};

// 测试使用
.button {
  background-color: @current-color; // 会编译成background-color: #ff4444;
}

之前的 ~"@color-@{state}" 会把结果转义成字符串（比如 "@color-active"），而上面的写法会直接解析成对应的变量引用。

场景2：Sass预处理器 #

Sass支持更直接的变量插值引用，或者更推荐用Map来管理状态变量：

方式1：直接变量插值 #

$color-active: #ff4444;
$color-inactive: #44ff44;
$state: active;

// 直接通过插值拼接变量名
$current-color: $color-#{$state};

.test {
  color: $current-color; // 编译后为color: #ff4444;
}

方式2：用Map管理（更推荐，维护性更强） #

// 用Map统一管理所有状态颜色
$color-state-map: (
  active: #ff4444,
  inactive: #44ff44,
  disabled: #cccccc
);

$state: inactive;

// 通过map-get动态取值
$current-color: map-get($color-state-map, $state);

.card {
  border-color: $current-color; // 编译后为border-color: #44ff44;
}

场景3：JavaScript #

在JS里，优先用对象来存储键值对，避免直接操作全局变量：

// 定义状态颜色对象
const stateColors = {
  active: '#ff4444',
  inactive: '#44ff44',
  disabled: '#cccccc'
};

const currentState = 'disabled';

// 动态获取对应颜色
const currentColor = stateColors[currentState];
console.log(currentColor); // 输出 #cccccc

如果必须访问全局变量（不推荐，易引发命名冲突），可以通过window对象（浏览器环境）：

// 全局变量
const colorActive = '#ff4444';
const currentState = 'active';

// 拼接变量名（注意驼峰转换）
const varName = `color${currentState.charAt(0).toUpperCase() + currentState.slice(1)}`;
const currentColor = window[varName];
console.log(currentColor); // 输出 #ff4444

总结 #

不管用哪种技术栈，用对象/Map统一管理状态相关的变量都是更清晰、更易维护的方案，比直接拼接变量名的方式更符合代码规范，也能避免很多潜在问题。

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