less中不存在自执行匿名函数，所谓写法实为.mixin调用或detached ruleset误用；语法(@a:1){...}()会直接报错；逻辑封装依赖带参混合、守卫、嵌套和变量作用域。
Less里根本没有“自执行匿名函数”这个东西
Less不支持JavaScript式的(function(){})()语法，所有所谓“自执行函数”的写法，本质是.mixin()调用或detached ruleset的误用。如果你在代码里写了(@a: 1) { ... }();，Less编译器会直接报错：ParseError: Expected ')' got '{'。Less的逻辑封装靠的是带参数的混合（.mixin）、守卫（when）、嵌套和变量作用域，不是JS运行时模型。
用.mixin + when模拟条件分支逻辑
想实现类似“根据主题色自动计算暗色文本对比度”的逻辑，不能靠函数返回值，得靠混合+守卫+递归展开。比如：
.text-contrast(@color) when (lightness(@color) > 70%) {
color: #333;
}
.text-contrast(@color) when (lightness(@color)
<p>调用时写<code>.text-contrast(#f0f0f0)</code>即可生效。注意三点：</p>
-
when守卫只支持有限运算符（=、>、、<code>=、and、or），不支持!或三元表达式 - 守卫条件里的函数（如
lightness()）必须能静态求值，不能依赖运行时JS变量 - 多个同名
.mixin定义会按顺序匹配，第一个满足守卫的即生效，不会“叠加”
用detached ruleset延迟计算并复用样式块
当你需要把一组样式当“值”传递、组合或条件注入时，detached ruleset最接近“闭包”效果。例如：
@theme-rules: {
background-color: @bg;
border: 1px solid darken(@bg, 10%);
};
.card(@bg) {
@bg: @bg;
.theme-rules();
}
这里@theme-rules不是函数，而是一个可复用的样式块；.card(#eee)调用时，@bg在.card作用域内被赋值，再展开.theme-rules()。关键限制：
-
detached ruleset内部无法访问外部变量，除非显式传入（如上例中先在.card里赋值@bg） - 它不能做循环或递归，也不能返回计算结果——只能展开样式
- 嵌套层级过深时，变量作用域容易混淆，建议用
@-prefix命名避免冲突
真正需要动态逻辑时，别硬扛Less
如果你的逻辑涉及数组遍历、字符串解析、异步数据映射（比如从JSON生成主题类名），Less做不到。这时候该换工具：
- 用PostCSS插件（如
postcss-custom-properties或postcss-for）补足循环/条件能力 - 用JS构建时生成Less变量文件（例如用
fs.writeFileSync('vars.less', `@primary: ${config.color};`)） - 直接切到CSS-in-JS方案（如Emotion的
css模板函数），让逻辑彻底跑在JS runtime里
Less的“封装”本质是编译期宏展开，不是运行时执行。越想把它当JS用，越容易掉进作用域不可见、守卫不触发、变量覆盖静默失败这些坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
