Less中无法运行时解析动态类名，应改用data-*属性配合CSS属性选择器匹配，如[data-status="loading"]，并可通过.each()循环生成多组规则，值必须加引号且Less 4.0+才支持。
Less里用属性选择器匹配带data-前缀的动态类
Less本身不支持运行时解析类名，但可以通过属性选择器模拟“批量匹配”效果。关键不是去猜类名，而是让HTML元素带上可预测的属性，再用[data-type]这类写法统一控制样式。
常见错误是试图写.class-*或.[class^="prefix"]——CSS和Less都不允许在选择器中使用通配符匹配类名字符串，浏览器根本不认。
- 把动态逻辑从class挪到
data-属性上，比如<div data-status="loading">、<code><div data-status="success"> <li>在Less中用<code>[data-status]匹配所有带该属性的元素，再用[data-status="loading"]细化 - 避免用
[data-status~="loading"]（空格分隔匹配），它对单值无意义，还可能误匹配
用Less变量+循环生成多组属性选择器
如果状态值固定（如primary、secondary、warning），可以用.each()函数批量产出规则，避免手写重复代码。
示例：生成所有data-theme值对应的背景色
立即学习“前端免费学习笔记（深入）”；
@themes: primary, secondary, warning, danger;
.each(@themes, {
[data-theme="@{value}"] {
background-color: lighten(color("@{value}"), 20%);
}
});
注意color("@{value}")需要提前定义@primary: #007bff;等变量，否则编译报错Unrecognized input。
- 循环变量名必须用
@{value}，不能写成@item或@theme - 属性值要加引号包裹，
[data-theme=@{value}]会编译成[data-theme=primary]，缺少引号在CSS中非法 - Less 4.0+才支持
.each()，旧版本需改用递归mixin
匹配class含特定子串的元素（慎用）
真要基于class名做匹配，唯一合法方式是利用CSS原生的[class*="prefix"]，但有硬伤：它匹配的是class属性整个字符串，不是单个类。
比如<div class="btn btn-primary icon-left">会被<code>[class*="primary"]命中，但<div class="btn-primary">也会被<code>[class*="btn"]误伤。
- 仅适用于class命名高度规范、且子串唯一的情况（如所有主题类都以
theme-开头且不混用） - 性能略差，浏览器需对每个元素的
class属性做字符串扫描 - Less中直接写
[class*="theme-"]即可，无需额外处理，但别指望它能区分theme-dark和theme-darken
为什么不用JavaScript动态加class更简单？
如果动态类来自API响应或用户操作，与其在Less里绕弯匹配，不如让JS控制data-属性或添加一个稳定主类（如.component），再用CSS层叠覆盖。
例如：JS设置el.dataset.state = "error"，Less写.component[data-state="error"] { color: red; }。这样既规避了class名不可控问题，又保持样式可维护。
真正难处理的是第三方组件库注入的随机类名——这种场景几乎没有纯CSS方案，得靠CSS-in-JS或定制构建流程注入预设类名。
