less中@{variable}插值仅限属性值，选择器拼接需用~""或.each()等新特性，运行时动态选择器应交由css变量或js控制。
Less中@{variable}插值只能用在属性值里，不能直接拼选择器
Less的字符串插值@{variable}默认只在声明块内部（如color: @{color};）生效，**直接写在选择器位置会报错或被忽略**。比如.btn-@{size} { ... }在旧版Less（
常见错误现象：ParseError: Unexpected input 或生成的选择器原样输出未替换（如.btn-@{size}没变成.btn-lg）。
- 仅支持在
class、id、伪类/伪元素的标识符部分插值，不能用于组合器（如& + @{sibling}）、属性选择器（如[data-type="@{type}"]需额外转义）或媒体查询条件 - 变量必须是字符串字面量或已定义的字符串变量；数字、布尔值或空值会触发编译失败
- 插值前后不能有空格：
.btn-@{size}末尾空格会导致失败，.btn-@{ size }中间空格也不行
用~"..."进行CSS表达式拼接可绕过限制
当需要动态生成复杂选择器（如带命名空间、BEM修饰符、响应式前缀）时，~"..."（转义字符串）是最直接的方案。它把引号内内容原样输出为CSS，配合@{}实现拼接。
示例：生成带命名空间的BEM修饰符
@ns: "myapp";
@modifier: "disabled";
.@{ns}-button.@{ns}-button--@{modifier} {
opacity: 0.5;
}
// 等价于手动写：
// .myapp-button.myapp-button--disabled { opacity: 0.5; }
但若修饰符来自嵌套循环或函数返回值，就得用~""：
.generate-states(@states) when (length(@states) > 0) {
@state: extract(@states, 1);
@{~".myapp-button.myapp-button--@{state}"} {
opacity: 0.5;
}
.generate-states(extract(@states, 2));
}
.generate-states(["hover", "focus", "active"]);
-
~".selector-@{var}"中的@{var}仍需满足字符串类型，否则编译中断 - 拼出的选择器无法被Less的&引用机制识别（如
&:hover不能接在~""块内），得手动重复写完整选择器 - 过度使用
~""会削弱Less的静态分析能力，IDE可能无法跳转或提示
用.each()配合selector-replace()做安全选择器重构
Less 4.0+ 提供了.each()和selector-replace()函数，适合批量处理已有选择器结构，比硬拼更健壮。
场景：给所有.card相关选择器统一加.theme-dark前缀
.theme-dark {
.each(
".card, .card__header, .card__body",
@selector,
@index,
{
@{selector-replace(@selector, ".card", ".card")} {
// 实际样式
}
}
);
}
更实用的是结合变量生成多主题：
@themes: "light", "dark", "high-contrast";
.each(@themes, @theme) {
.theme-@{theme} {
@{~".btn.btn--@{theme}"} {
background: lighten(color(@theme), 20%);
}
}
}
-
selector-replace()只替换完全匹配的子串，.card__header里的.card会被误替，需谨慎设计原始选择器格式 -
.each()内部的@{}插值仍受作用域限制——外部定义的变量在回调中不可见，得提前用@var: value;声明 - 这种写法对老项目兼容性差，Less 3.x 不支持，需确认构建工具所用Less版本
真正动态的选择器应交给CSS自定义属性或JS控制
如果选择器需根据运行时状态（如用户偏好、设备类型、AB测试分组）变化，Less编译期插值就力不从心了。这时候硬塞逻辑进预处理器反而增加维护成本。
更合理的分层是：
- Less负责生成基础原子类（
.btn,.btn--primary）和主题模板 - 用
:is()或:where()在CSS中做运行时匹配（如:is([data-theme="dark"] .btn)） - 关键分支交由JS控制class切换，或通过
style.setProperty()注入CSS变量
例如暗色模式适配：
:root {
--btn-bg: #007bff;
}
@media (prefers-color-scheme: dark) {
:root {
--btn-bg: #343a40;
}
}
.btn {
background-color: var(--btn-bg);
}
Less在这里只需定义变量映射，不用碰选择器拼接。
插值容易让人误以为“能动态生成任意CSS”，但实际它只是编译期文本替换，没有语法树操作能力。越想用它模拟运行时行为，后期越难调试和拆分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
