less单元测试测编译输出是否符合预期，即验证变量修改后样式声明是否同步更新、mixin传参后是否正确展开；使用less-test-runner比对.test.less与.expected.css，需显式mock依赖变量并锁定less版本以防ci兼容性问题。
Less单元测试到底测什么
Less本身不运行在浏览器里，也不直接生成DOM，所以“单元测试Less”不是测样式渲染效果，而是测编译输出是否符合预期。核心是验证：variables.less改一个值，.button类里引用它的background-color是否同步更新；.flex-center()这个mixin传入@gap: 8px时，是否正确输出gap: 8px和display: flex等声明。
用less-test-runner跑基础编译断言
官方推荐的less-test-runner（Less.js项目自带）最轻量，适合验证变量、mixin展开、嵌套结构。它不依赖Node环境模拟，只比对输入.less文件和期望的CSS字符串。
- 安装：
npm install less-test-runner --save-dev - 写一个
test/button.test.less，里面只放待测逻辑：.btn { .border-radius(@r: 4px); } - 对应期望输出写
test/button.expected.css：.btn { border-radius: 4px; } - 运行：
npx less-test-runner test/—— 它会自动匹配.test.less和.expected.css文件对
注意：它不处理@import链，所有被引用的variables或mixins必须在测试文件里显式@import，否则报Variable is undefined。
mock-import解决跨文件依赖问题
真实项目里button.less肯定@import "../base/variables"，但less-test-runner默认不解析路径别名或Webpack配置。这时候得手动mock：
- 在测试文件顶部加：
@import (reference) "mock-variables"; - 新建
test/mock-variables.less，只定义测试需要的最小变量集：@color-primary: #007bff;、@border-radius-default: 4px; - 避免用
@import (less)——它会把CSS内容也吐出来，污染预期输出 - 如果测试涉及媒体查询或
&:hover嵌套，确保mock-variables里也提供对应断点变量，比如@breakpoint-md: 768px;
这种mock不是绕过问题，而是明确隔离测试边界：你测的是“这个mixin在给定变量下是否输出正确”，而不是“整个项目变量体系是否加载成功”。
CI里容易漏掉的兼容性陷阱
本地跑通不代表CI能过。Less 4.x开始默认启用新语法（如math: always），但团队可能还在用3.x版本编译器。CI脚本里必须锁定Less版本：
- 在
package.json中固定："less": "4.2.0"，不要写^4.2.0 - CI命令里显式调用：
npx less@4.2.0 --version确认版本 - 测试用例里避免使用
color-blending等仅4.x支持的函数，除非你明确要求全团队升级 -
less-test-runner本身不校验语法错误，所以要额外加一步：npx lessc test/button.test.less --lint检查是否有ParseError
最常被忽略的点是@import (reference)在旧版Less里不被识别——它会静默跳过，导致变量未定义却无报错，测试反而通过。必须在CI里用实际编译器版本跑一次完整构建验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
