less变量定义字体栈时必须用引号包裹整个值，如@font-stack: 'helvetica, arial, sans-serif';，否则逗号会被解析为列表分隔符导致编译失败；使用时应直接写font-family: @font-stack;，由less自动展开为合法css字体声明。
Less变量定义字体栈时，必须用引号包裹整个值
Less里直接写 @font-stack: Helvetica, Arial, sans-serif; 会报错，因为逗号被解析为列表分隔符。正确做法是把整个字体栈用单引号或双引号包起来，让Less当成一个字符串值处理：
@font-stack: 'Helvetica, Arial, sans-serif';
这样后续在规则中使用 font-family: @font-stack; 才能原样输出 CSS 字体声明。不加引号会导致编译失败，错误信息类似 Operation on an invalid type 或直接卡在解析阶段。
切换多套预设字体栈只需改一个变量，但要注意引号嵌套规则
实际项目常需区分「中文优先」和「西文优先」两套方案，比如：
@font-stack-zh: 'PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif'; @font-stack-en: 'Inter, system-ui, -apple-system, sans-serif';
切换时只需注释/反注释对应行，或通过条件变量控制：
- 所有字体名内部的空格、括号、连字符都合法，但外部引号不能省
- 如果某字体名含单引号（极少见），改用双引号包裹整个栈
- 避免在变量值里写
/* 注释 */，Less 不会忽略它们，会导致编译异常
用 font-family 引用变量时，不能加额外引号
常见错误是写成 font-family: "@font-stack"; 或 font-family: '@font-stack'; —— 这会让 Less 把变量名当字面字符串输出，结果生成的是 font-family: "@font-stack"; 而非真实值。
正确写法只有这一种：
p { font-family: @font-stack; }
Less 会在编译期自动展开变量，且不额外添加引号（浏览器能正确解析带空格的字体栈）。如果展开后 CSS 出现引号嵌套问题，说明变量定义时就多套了一层引号。
配合 @import 拆分字体配置时，注意作用域和覆盖顺序
把字体变量抽到 _fonts.less 里再 @import '_fonts.less'; 是好习惯，但要注意：
- 导入顺序决定变量生效优先级：后导入的同名变量会覆盖前面的
- 不要在
@import语句前用@font-stack，否则变量未声明 - 若用 Webpack + less-loader，确保
paths配置包含变量文件所在目录，否则报File not found
字体栈看似简单，但引号位置、变量展开时机、导入顺序这三处出错，都会导致最终 CSS 完全不对，而且浏览器开发者工具里看不出 Less 层的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
