Less中动态宽度需用@value在顶层或mixin外声明变量，width: (@p * 1%);确保单位转换正确，动画须由JS控制class或style，transition仅作CSS配合，变量无法运行时响应。
用 @value 声明动态宽度变量，别用 @import 混淆作用域
Less 里没法直接把 JS 变量塞进 CSS，但可以用 @value 定义一个可被计算的数值变量，再用它驱动 width。关键点是：这个变量必须在样式规则作用域内可见，不能藏在另一个 .less 文件里靠 @import 引入后就默认生效——导入只是拼接文本，不会自动提升变量作用域。
常见错误现象：width: @progress * 1%; 报错 Variable @progress is undefined，其实是因为变量定义在别的文件、或者被嵌套在 .bar {} 里导致外部不可见。
- 把进度变量放在顶层或 mixin 外部声明，例如：
@progress: 65; - 如果要复用，写成带参数的 mixin：
.progress-bar(@p) { width: @p * 1%; }，调用时传值：.progress-bar(72); - 避免在
:extend()或&嵌套块里定义变量，它们会限制变量可见范围
百分比计算必须显式乘 1%，不能只写 @p%
Less 解析 @p% 时，会把它当作文本拼接，而不是数学运算。比如 @p: 80，width: @p%; 编译出来是 width: 80%; —— 看似对，但一旦 @p 是表达式（如 @p: round(3.1415 * 10);），就会因缺少运算符报错。
更隐蔽的问题是单位混用：@p: 0.8，你本意是 80%，但 width: @p%; 编译成 width: 0.8%;，结果条只填了不到 1%。
- 统一用
width: (@p * 1%);，括号保证优先级，* 1%显式转换单位 - 输入值建议约定为整数 0–100，降低使用者理解成本
- 如果后端给的是小数（如
0.75），先乘 100：width: (@p * 100 * 1%);
动画填充效果得靠 transition + 类名切换，不是靠变量重编译
Less 是编译时工具，所有变量都在构建阶段固化成 CSS。想让进度条随数据变化“动起来”，不能指望改个 @progress 值再刷新页面——那只是重新生成静态样式。
真实场景中，进度由 JS 控制，所以 CSS 只需提供可过渡的属性和初始状态。
- 基础样式里必须声明
transition: width 0.3s ease-in-out; - JS 修改的是元素的
style.width或切换预设类名（如.p-30、.p-85） - 别在 Less 里写
@keyframes配合变量，动画帧无法响应运行时变量变化
IE 兼容性下 calc() 和变量混合要小心括号层级
有些老项目还要支持 IE11，而 IE 对 calc() 里嵌套 Less 变量很敏感。比如 width: calc(@p% - 2px); 在某些 Less 版本里会编译失败或出错值。
根本原因是 Less 会先尝试解析 @p%，再拼进 calc，中间若缺空格或括号，IE 的 CSS 解析器就直接放弃。
- 写成：
width: calc((@p * 1%) - 2px);，外层括号让 Less 明确识别整个表达式 - 避免在
calc内做复杂运算，如@p + 5 * 2，先算好再传入 - 真要兼容 IE，不如放弃动态减法，用 padding 或伪元素模拟边框留白
实际用的时候，最常卡住的不是语法，而是误以为 Less 变量能实时响应 JS——它不能。变量只是编译期占位符，动效、交互、异步更新，全得靠 JS 驱动 DOM 和 class。把这点想清楚，后面怎么组织样式、怎么跟前端对接，就少绕两圈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
