less中unit()函数仅支持带单位数值，纯数字或字符串会失败；@{var}在calc()中无效因浏览器不识别less插值；&用于编译期静态嵌套，:is()为运行时动态匹配；~别名导入依赖构建工具配置，需实测验证。
Less 中的 unit() 函数为什么总返回空或报错？
因为 unit() 只能处理带单位的数值，纯数字（如 42）或字符串（如 "42px"）都会失效。
- 正确用法：传入一个已带单位的
number类型值，比如@size: 16px; unit(@size, em)→1.0em - 常见错误：对计算结果没做类型校验，比如
unit(16 * 2, px)实际是unit(32, px)，但32是无单位数，unit()拒绝转换 - 安全写法：先用
isnumber()和isunit()判断，或直接用convert()替代（如convert(32, px)） - 注意：Less 4.0+ 才支持
convert()，旧版本只能靠变量预设单位
Less 变量插值 @{var} 在 calc() 里为什么不生效？
浏览器原生 calc() 不认识 Less 插值语法，编译时会被当普通字符串保留，导致运行时报错或计算异常。
- 错误示例：
width: calc(100% - @{gutter});编译后变成width: calc(100% - @gutter);，CSS 解析失败 - 正确做法：把整个表达式交给 Less 计算，再注入单位，例如
@gutter: 24px; width: calc(100% - @gutter);（Less 会自动展开为calc(100% - 24px)） - 如果必须动态拼接（如响应式断点），改用
~"calc(100% - @{gutter})"，但要确保@gutter是合法 CSS 值，否则引号包裹后无法被解析 - 风险点：使用
~""会跳过 Less 类型检查，单位缺失、空值、嵌套变量未定义都只在浏览器控制台暴露
Less 的 & 嵌套和 CSS :is() 兼容性怎么权衡？
& 是 Less 编译期特性，生成的是静态选择器；:is() 是运行时 CSS 特性，两者目的不同，不能互相替代，混用反而增加维护成本。
- 用
&时：适合固定结构复用，比如.btn { &--primary { ... } &__icon { ... } }，输出干净、体积小 - 用
:is()时：适合运行时动态匹配（如框架组件类名不确定），但 IE 完全不支持，Chrome 105+ 才稳定支持伪类列表长度 - 坑点：不要在
&内部写:is(.a, .b)然后指望 Less 帮你拆解——它不会展开，只会原样输出，可能导致选择器权重异常或重复 - 建议：组件级样式优先用
&，全局工具类或主题切换逻辑再考虑:is()+ JS 控制类名
Less 导入路径别名（@import "~xxx"）为什么找不到 node_modules 里的包？
Less 默认不识别 Webpack/Vite 的别名解析规则，~ 只是约定，并非标准，实际是否生效取决于构建工具配置和 Less 插件版本。
立即学习“前端免费学习笔记（深入）”；
- Webpack 场景：需确认
less-loader配置中paths包含node_modules，或启用javascriptEnabled: true（有安全风险） - Vite 场景：v4.3+ 内置 Less 支持
~，但仅限于node_modules根目录，~package/subpath要手动配resolve.alias - 更稳方案：用相对路径导入（
@import "../node_modules/normalize.css/normalize.css";），或提前用addLessLoader注入paths - 调试技巧：开启 Less 编译的
verbose日志，看实际查找路径，比猜~有没有生效更直接
事情说清了就结束。Less 的函数和路径行为高度依赖编译环境，同一段代码在 CLI、Webpack、Vite 里表现可能完全不同——别只看文档，一定要在目标环境中实测。
