less不支持@content，但可用带参数的mixin模拟：推荐用嵌套mixin+动态调用（.@{name}()）、封装内容为独立mixin，或升级至sass以获得原生@content支持。
Less里没有@content，但可以用带参数的混合（mixin）模拟
Less本身不支持Sass那种原生的@content机制——即把一段CSS块作为“内容”传进mixin里执行。但你可以用带@arguments或显式参数的mixin绕过这个限制，核心思路是：把要注入的样式提前定义为变量、另一个mixin，或直接拼进调用处。
常见错误是试图写.my-mixin { @content; }，这会报错Unknown word，因为Less解析器根本不认识@content。
- 推荐做法：把“内容”封装成独立mixin，再由主mixin调用它
- 避免用
@arguments拼接样式，它只适合传值，不能安全注入声明块 - 如果内容固定且简单，直接用参数控制开关（比如
@include-border: true），比强行注入更可控
用嵌套mixin实现“伪内容块注入”
这是最接近Sass行为的写法：主mixin接收一个mixin名称字符串，再用.call()语法（Less 4.0+）动态调用它。注意不是所有版本都支持，旧版Less需降级为显式调用。
.card(@style-mixin) {
border: 1px solid #ccc;
padding: 1rem;
.@{style-mixin}(); // 动态调用传入的mixin名
}
// 定义内容块
.card-content() {
font-size: 0.9rem;
color: #555;
}
// 使用
.my-card {
.card(card-content);
}
- 必须确保
@style-mixin是已定义的mixin名（字符串），不能是CSS规则或变量 - Less 3.x不支持
.@{...}()，会报Expected ')' got '@'，此时只能改成硬编码调用，比如.card-content()写死在mixin体内 - 这种写法无法传递作用域内的变量给被调用mixin，若需共享数据，得靠全局变量或额外参数
用~""拼接字符串？别这么做
有人尝试用转义字符串~"font-size: 12px;"塞进mixin里再#{...}插值输出，这看似能“注入”，实则危险：
- 生成的是纯文本，不会经过Less编译，无法使用变量、函数或嵌套
- 容易引发CSS语法错误（比如漏分号、引号嵌套混乱）
- 调试困难，DevTools里看到的是拼接后的结果，而非源码逻辑
- Webpack或Vite的less-loader通常会直接报
ParseError，尤其含@media或嵌套时
真正需要内容块注入时，考虑升级或换方案
如果你的项目重度依赖类似Sass的@content模式（比如写UI组件库、主题系统），Less的模拟方案很快会变得脆弱。这时候该直面限制：
- Less 4.0+虽支持
.@{name}()，但无作用域穿透、无多层嵌套@content能力 - PostCSS +
postcss-mixins可自定义类似语法，但失去Less原生变量和运算优势 - 最省心的路径其实是切到Sass（Dart Sass），特别是已有团队熟悉
@mixin/@content协作流程
复杂嵌套和跨组件样式复用，不是Less的设计重心——它更擅长静态变量和简单混合。强行补全@content语义，反而会让维护者困惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
