如何在Less中通过JS表达式动态计算CSS属性值？-css教程-PHP中文网

less 不支持直接写 javascript 表达式，所有 js 代码（如 math.max()、typeof）会被视为语法错误或原样输出；其变量、运算和函数（如 lighten()、max()）均在编译期静态求值，不参与运行时逻辑。

如何在less中通过js表达式动态计算css属性值？

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()
}
</p>

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);
});
</p>

javascriptEnabled: true 在浏览器环境默认禁用（安全限制），Node.js 中可用但有风险，不建议用于不可信 Less 源码
浏览器中更稳妥的做法是：JS 算好值 → 写入 :root CSS 变量 → 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);
}
</p>