less中加减乘除不能直接写裸数字，必须带单位或参与已有带单位的值运算；颜色需用lighten()、mix()等函数而非裸算符；变量须已定义且类型兼容；所有运算在编译时静态执行。

Less里的加减乘除能直接写数字吗？ 不能直接写裸数字，必须带单位或参与已有带单位的值运算。比如 10px + 5 会报错，因为 5 没单位；但 10px + 5px 或 10px * 2 是合法的。Less 会自动推导结果单位——乘法中一个无单位数可作系数（1.5em * 2 → 3em），但两个带不同单位的值相加（如 10px + 1em）会报错，单位不兼容。

• 运算只在编译时执行，不是运行时，所以不能依赖 JS 变量
• 支持括号改变优先级：(10px + 2px) * 3
• 除法有点特殊：10px / 2 可行，但 10px / 2px 得到的是纯数字 5（无单位），后续若需单位得手动补上

怎么让颜色也能做算术运算？ Less 支持颜色函数而非裸算符。别写 @red + @blue，那会报错。要用 lighten()、darken()、saturate()、fade() 等函数调整色调，或用 mix() 混合两种颜色。

• lighten(#333, 20%) 把灰变亮 20%
• mix(#f00, #00f, 60%) 按 60% 权重混合红与蓝
• 颜色加减法不存在，想“叠加”颜色得用 spin() 或 adjust-hue() 调整色相

变量参与运算时要注意什么？ 变量必须已定义且类型兼容。常见错误是变量未初始化、单位缺失、或类型混用（比如把字符串当数值用）。

• 错误示例：@gap: "10"; margin: @gap + 5px; —— "10" 是字符串，不能加 5px
• 正确写法：@gap: 10px; margin: @gap + 5px; → 15px
• 若变量来自函数返回值（如 @base: unit(1.2, em)），要确认它确实输出带单位数值，否则后续运算可能失败

为什么有时候运算结果没生效？ 最常被忽略的是 Less 的作用域和求值时机。嵌套规则里定义的变量默认不向外提升，且所有运算都在解析阶段完成，不会响应媒体查询或伪类中的动态条件。

• 在 @media 块内定义的变量，外部不可见
• 不支持类似 CSS 自定义属性那样的 runtime 计算，calc() 是浏览器做的事，Less 编译完就固定了
• 如果你写了 @size: 16px; .btn { font-size: @size <em> 1.25; }</em>，输出就是 font-size: 20px;，不是 calc(16px 1.25)

Less 的算术是静态预处理，不是表达式引擎。单位一致性、变量声明顺序、以及函数替代方案，才是实际写的时候卡住的关键点。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！