Less 不支持直接写 JavaScript 表达式，所有 JS 代码（如 Math.max()、typeof）会被视为语法错误或原样输出；其变量、运算和函数（如 lighten()、max()）均在编译期静态求值，不参与运行时逻辑。
Less 里不能直接写 JS 表达式
Less 编译器（如 lessc）运行在 Node.js 或浏览器中，但它的语法解析器不执行 JavaScript。你写的 {}、Math.max()、typeof 这类 JS 代码，在 Less 中会被当作普通字符串或语法错误处理——编译直接失败，或者值被原样输出为 CSS 字符串。
常见错误现象：ParseError: Unrecognised input 或生成类似 width: Math.max(100px, 200px); 的无效 CSS。
- Less 支持的是自己的函数和运算，比如
lighten(@color, 10%)、@base * 2 - 所有变量、运算、函数调用都在编译期求值，不是运行时
- 想“动态”，得换地方：要么提前在 JS 里算好传入 Less 变量（通过 JS API），要么放弃 Less，用 CSS-in-JS 或原生 CSS 自定义属性 + JS 操作
用 Less 函数替代简单 JS 计算
多数场景下，你其实不需要 JS——Less 内置函数已覆盖常见需求。比如取最大值、条件判断、单位转换等。
示例：想让 font-size 不小于 14px，且随屏幕缩放：
立即学习“前端免费学习笔记（深入）”；
@base-size: 16px;
@min-size: 14px;
<p>.my-text {
font-size: max(@base-size * 0.85, @min-size); // Less 4.0+ 支持 max() / min()
}
-
max()和min()是 Less 4.0+ 原生函数，只接受相同单位的数值（16px和14px可比，16px和1.2em会报错） - 旧版 Less 可用
if()+unit()+convert()组合模拟，但复杂且易出错 - 注意：Less 的
max()不是 JS 的Math.max()，不支持展开数组、不支持混合单位、不支持运行时参数
真需要 JS 动态计算？走 Less JS API 注入变量
如果你必须依赖运行时数据（比如用户偏好、设备 DPR、API 返回值），就得绕过纯 Less 文件，在 JS 层控制编译流程。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
核心思路：用 less.render() 或 less.modifyVars()，把 JS 计算结果作为变量传入：
const fs = require('fs');
const less = require('less');
<p>const dynamicValue = Math.max(window.innerWidth / 10, 12); // JS 算出来的值</p><p>less.render(fs.readFileSync('style.less', 'utf8'), {
paths: ['node_modules/'],
javascriptEnabled: true, // ⚠️ 必须开启（仅限 Node.js 环境）
modifyVars: {
'@js-calculated-size': <code>${dynamicValue}px</code>
}
}).then(output => {
document.styleSheets[0].insertRule(output.css, 0);
});
-
javascriptEnabled: true在浏览器环境默认禁用（安全限制），Node.js 中可用但有风险，不建议用于不可信 Less 源码 - 浏览器中更稳妥的做法是：JS 算好值 → 写入
:rootCSS 变量 → Less 编译时用@{var-name}引用（需配合插件或构建工具预处理） - Webpack 用户可结合
less-loader的additionalData选项注入变量，避免手写 render 流程
别硬套 Less，该用 CSS 变量 + JS 就用
Less 是预处理器，不是运行时引擎。一旦你发现要频繁写 if (x > y) { ... } 或调用 Date.now()、window.matchMedia，说明技术选型已经错位。
现代方案更轻量直接：
// JS 中
document.documentElement.style.setProperty('--dynamic-width', `${Math.min(300, window.innerWidth)}px`);
<p>// CSS 中（无需 Less）
.element {
width: var(--dynamic-width, 200px);
}
- CSS 自定义属性天然支持运行时更新，性能好，调试直观
- Less 编译后就固定了，JS 无法修改其生成的规则；而
setProperty能实时响应 resize、theme 切换等事件 - 构建时用 PostCSS 插件（如
postcss-custom-properties）还能回退到静态值，兼顾兼容性
真正卡点往往不在“怎么写”，而在没分清：这个值是构建时已知的，还是用户打开页面后才有的。
