Less 4.x中除法不再自动计算,必须用括号包裹(如(100px / 4))或使用./语法(如100px ./ 4),否则/被视为纯字符,导致CSS输出无效。
除法不再自动计算,必须加括号或用 ./
Less 4.x 把除法行为硬编码为“仅括号内或带 ./ 时才执行”,/ 在外面就是纯字符,不参与运算。这不是 bug,是明确设计——避免 CSS 中 / 被误解析为 font、background 等简写分隔符。
常见错误现象:width: 100px / 4; 编译后原样输出 width: 100px / 4;,浏览器直接忽略该样式,调试时找不到原因。
- ✅ 正确写法一:
width: (100px / 4);—— 推荐,语义清晰,支持单位混合(如(2rem / 2)) - ✅ 正确写法二:
width: 100px ./ 4;—— 注意./前后必须有空格,100px./4会报错 - ❌ 错误写法:
width: 100 / 4px;、width: (100 / 4)px;、line-height: 20px / 16px;
@import 必须显式声明 .less 后缀
v4 默认关闭路径自动补全,@import "mixins" 不再匹配 mixins.less 或 mixins.css,而是按字面路径查找。结果常是变量未定义、ReferenceError: variable is undefined,其实只是文件根本没导入。
使用场景:项目里大量用 ~ 别名引入第三方库样式(比如 Ant Design),但 v5 已移除 .less 源码,@import "~antd/lib/style/themes/default.less" 会直接失败。
立即学习“前端免费学习笔记(深入)”;
- ✅ 必须写全路径:
@import "./variables.less";、@import "~antd/dist/antd.less";(确认该路径真实存在 .less 文件) - ⚠️ 若用
~别名,先ls node_modules/antd/dist/看是否有antd.less;Ant Design v5 仅提供antd.css,不可直接 import .less
颜色和尺寸函数必须带单位
v4 收紧了函数参数校验,lighten(@color, 10%) 可以,但 lighten(@color, 10) 会被拒绝——10 不是合法的百分比值,必须写成 10%。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
影响范围包括:fade()、saturate()、percentage()、round()(后者要求输入带单位或明确数字)。
- ✅ 正确:
fade(@primary, 20%)、percentage(0.5)、round(10.4px) - ❌ 错误:
fade(@primary, 20)(缺 %)、percentage(1/2)(未括起的除法,输出1/2字符串) - ⚠️ 注意:
round(10.4)合法,但round(10.4px)输出10px;单位参与运算时,结果保留第一个单位
变量作用域更严格,嵌套中不能隐式访问父级变量
v4 强化了块级作用域规则,.btn { @size: 12px; &-large { font-size: @size; } } 在 v3 中能工作,v4 会报 Variable @size is undefined。
这不是语法错误,是作用域隔离增强——嵌套选择器内部不自动继承上层 @ 变量,除非显式声明或提升作用域。
- ✅ 解决方式一:把变量提至全局或文件顶部
@size: 12px; - ✅ 解决方式二:用
@{}插值绕过作用域限制:&-large { font-size: @{size}; }(前提是@size在外层已定义) - ⚠️ 避免依赖隐式行为:v3 的“能跑”不代表“正确”,v4 暴露的是长期被忽略的作用域漏洞
最易被忽略的点是:这些变化全部发生在编译期,没有运行时兜底。漏一个括号、少一个 %、错一次 @import 路径,都不会报红,而是静默产出无效 CSS —— 最终表现为样式消失、布局错乱,排查成本远高于修改成本。