less 4.x 不支持 css math.* 函数和运行时 calc() 计算，所有运算均在编译期完成，仅支持基础四则运算、单位严格匹配及内置函数如 round()、percentage()，calc() 需用转义字符串输出。
Less 4.x 本身不支持原生 CSS math.* 函数（如 math.div()、math.pow()），这些是 Sass 专属的编译时数学模块，CSS 原生 calc() 等函数也**不会被 Less 编译器解析或计算**——它只做字符串拼接和变量替换。所谓“利用 Less 解析 CSS 网格 + 原生 Math 函数”，本质是混淆了编译时（Less）与运行时（浏览器）两个阶段。
Less 4.x 中无法调用 CSS math.* 函数
Less 不认识 math.div(100%, 3) 这类写法，会直接报错：ParseError: expected expression 或 Unrecognised input。因为：
-
math.*是 Sass 3.3+ 内置模块，需显式@use "sass:math"，Less 完全没有该命名空间 - Less 的运算符（
+/-/*//）仅支持简单算术，且除法/在属性值中会被误认为 CSS 除号（如font: 12px/1.5），必须用括号包裹：(100% / 12) - 所有 Less 计算都在编译时完成，无法读取 CSS 自定义属性（
--col-count）、元素尺寸或视口变化
真正能用在 Less 里的“数学”只有基础运算和函数封装
Less 4.x 支持的可靠计算方式只有：
- 变量参与四则运算：
@gutter: 24px; .item { margin: (@gutter / 2); } - 单位自动继承规则：若左操作数带单位（如
100px），结果即带该单位；若都无单位，结果为纯数字 - 内置函数如
percentage()、round()、floor()、ceil()—— 注意它们只接受数字，不接受带单位值（percentage(1/12)✅，percentage(100%/12)❌） - 用递归 mixin 模拟循环计算列宽：
.make-col(@n, @total) when (@n > 0) { .col-@{n} { width: percentage(@n / @total); } .make-col((@n - 1), @total); }
Grid 布局中该在哪层做计算？
CSS Grid 的灵活布局逻辑必须分层处理，混用会导致失效：
-
编译时（Less）：生成固定结构，如
grid-template-columns: repeat(12, 1fr)、预设断点类名（.grid-sm-6）、计算静态比例（width: 50%） -
运行时（CSS + 浏览器）：用
calc()处理响应式动态值，例如：grid-template-columns: calc(100% - var(--gap) * 11) / 12，或结合minmax()和clamp()实现流体列宽 -
绝对不能：在 Less 里试图“模拟”
minmax(auto, 1fr)或fit-content()—— 这些是布局引擎行为，Less 无法生成等效逻辑
Less 中安全使用 calc() 的写法
Less 可以输出 calc() 字符串，但必须避免被自身运算干扰：
- 用转义防止 Less 解析：
width: ~"calc(100% / 12)";（注意引号和波浪线） - 拼接变量要小心空格：
@cols: 12; width: ~"calc(100% / @{cols})";→ 输出calc(100% / 12) - 不要写
width: calc(100% / @cols);—— Less 会尝试执行除法，而/在未括起时易被误判为分隔符 - 嵌套
calc()时，浏览器兼容性优先于 Less 可读性：例如~"calc(calc(100% - 2rem) / 3)"在旧版 Safari 可能失败，应降级为单层
最常被忽略的一点：Less 编译后输出的是静态 CSS，它无法感知 DOM 结构变化或用户交互。任何需要根据滚动、缩放、容器尺寸实时响应的布局逻辑，必须交给 CSS 原生函数或 JS，而不是塞进 Less 变量里“假装能算”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
