Less变量引用必须用@{...}插值语法,直接写变量名会被视为字面量;插值仅适用于字符串拼接、选择器、属性值等动态文本场景,不支持嵌套,且函数调用中无需插值。

可以,但必须用插值语法 @{...},直接写变量名会被当成字面量处理。
Less变量引用必须用 @{...} 插值
Less 不支持像 Sass 那样直接 @a: @b; 的链式赋值。如果想让一个变量的值是另一个变量的计算结果(比如拼接、组合),必须显式使用插值语法。
- 错误写法:
@color-primary: #007bff; @btn-bg: @color-primary;→ 编译后@btn-bg就是字面量@color-primary,不是#007bff - 正确写法:
@color-primary: #007bff; @btn-bg: @{color-primary};→ 编译后@btn-bg展开为#007bff - 插值只在字符串拼接或属性值中生效,不能用于选择器、
@media条件等非值上下文
拼接字符串时 @{...} 是唯一方式
比如生成带前缀的类名或动态属性值,必须靠插值把变量“注入”到字符串里。
-
@prefix: "btn"; @size: "lg"; .@{prefix}-@{size} { padding: 1rem; }→ 输出.btn-lg { padding: 1rem; } - 漏掉任一
@{...},比如写成.@prefix-@{size},Less 会报错或当作普通文本处理 - 插值不支持嵌套,
@{ @{color} }是非法的;需先展开再引用,或改用函数如lighten(@color, 10%)
变量引用 + 函数调用要分两步走
想基于一个颜色变量生成衍生色(如 darken),不能直接在声明里嵌套函数调用加插值,而应先定义基础变量,再用函数操作它。
立即学习“前端免费学习笔记(深入)”;
- 可行:
@base-color: #3498db; @highlight: darken(@base-color, 10%); - 不可行:
@base-color: #3498db; @highlight: darken(@{base-color}, 10%);→darken()接收的是已解析的颜色值,不是字符串,插值反而会把它转成字符串导致报错 - 函数参数不需要插值,只有字符串拼接、选择器、属性名等需要动态文本的地方才需要
@{...}
最常被忽略的是:插值不是“取值”,而是“字符串替换”。它发生在编译期,且只对变量名本身做文本替换——所以变量必须已声明、不能跨作用域引用未导出的局部变量、也不能在 @import 前引用后导入的变量。


















