less 中可用 detachedrulesets 模拟 scss 的 @content：定义 mixin 时以变量接收样式块，调用时用 @var() 展开；需注意作用域继承规则、避免过度嵌套，并谨慎权衡复用方案。
Less 里没有原生 @content，但 DetachedRulesets 能模拟出等效行为
SCSS 的 @content 允许你在 mixin 中注入任意样式块，Less 没有这个语法，但它的 DetachedRulesets（即把样式块赋值给变量）可以实现几乎一样的效果——关键在于「传入、展开、作用域继承」这三步要写对。
怎么定义和调用一个支持内容注入的 mixin
核心是把样式块作为参数传入，并在 mixin 内部用括号 () 展开它。注意：必须显式加括号，否则只是变量引用，不会执行。
-
.card(@styles) { border: 1px solid #ccc; @styles(); }—— 正确：末尾@styles()触发执行 -
.card(@styles) { border: 1px solid #ccc; @styles; }—— 错误：只会输出变量名，不展开 - 调用时写成
.card({ background: #f0f0f0; padding: 12px; });，大括号表示一个 detached ruleset - 如果需要复用同一套注入样式，可先存为变量：
@card-body: { background: #f0f0f0; padding: 12px; };，再传.card(@card-body);
嵌套与作用域：为什么你的注入样式没生效
DetachedRulesets 默认继承**定义时的作用域**，不是调用时的作用域。这是最容易踩的坑。
- 如果你在
@card-body里写了color: @text-color;，而@text-color是在 mixin 外部定义的，那它能访问；但如果@text-color是在.cardmixin 内部声明的，@card-body就看不到 - 想强制使用调用处的变量？不行——Less 不支持动态作用域切换。折中方案是把依赖变量显式传进去：
.card(@styles, @bg: #fff) { ... @styles(@bg); }，然后注入块写成{ background: @bg; } - 嵌套选择器会保留层级关系：传入
{ &__title { font-weight: bold; } }，最终生成的是.card__title，不是孤立的__title
性能和维护提醒：别滥用 DetachedRulesets
它不是语法糖，而是运行时解析的规则集，过度嵌套或深层传递会拖慢编译速度，尤其在大型项目中。
- 单次注入建议控制在 10 行以内样式；超过就该拆成独立 class 或用
:extend() - VS Code + Less 官方插件对 detached ruleset 的语法高亮支持一般，容易漏掉末尾括号，建议写完立刻编译验证
- 无法和
@media查询直接组合（比如传入一个带@media的 ruleset），Less 会报错；需改用.media-sm() { @media (max-width: 768px) { @arguments(); } }这类封装
真正难的不是写法，是判断「这里到底该用注入、还是该抽成 BEM 命名类、还是该用 extend」——没有银弹，得看样式复用粒度和团队协作习惯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
