HTML模板不支持LESS/SCSS语法，浏览器原生无法解析，必须通过CLI预编译为CSS后引入；开发中禁用浏览器端实时编译，生产环境严禁部署源文件。
HTML 模板本身不支持变量、嵌套或混合等预处理能力——<style> 标签里写 @variable 或 $color 会直接被浏览器忽略，不是语法错，是根本不认识。
浏览器原生不解析 .less/.scss 文件
你在 index.html 里写 <link rel="stylesheet" href="main.less">，浏览器只会把它当纯文本下载，不会编译，也不会应用样式。这不是路径问题，也不是版本问题，是能力缺失。
常见错误现象：
- 页面空白或样式丢失，控制台无报错（因为没触发任何 CSS 解析）
- Network 面板看到
main.less返回 200，但 MIME 类型是text/plain - 右键“查看页面源代码”能看到
.less内容，但开发者工具的 Styles 面板里查不到对应规则
生产环境必须用 CLI 预编译为 CSS
唯一上线可行方案：把 .less 或 .scss 文件用命令行工具转成标准 CSS，再引入。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 安装全局工具：
npm install -g less或npm install -g sass - 编译命令示例：
lessc src/style.less dist/style.css，或sass src/style.scss dist/style.css -
index.html中只引入编译结果：<link rel="stylesheet" href="dist/style.css"> - 别把
.less/.scss文件部署到线上服务器——既无用，又暴露项目结构
开发阶段别用 less.js/sass.js 做实时编译
虽然 less.js 可通过 <script src="less.js"> + <style type="text/less"> 实现浏览器端编译，但实际不可靠：
- 首次加载卡顿明显：所有 Less 要在客户端逐行解析+编译，阻塞渲染
- 报错定位失效：错误堆栈指向
less.js内部某行，不是你写的variables.less第 12 行 - Sass 官方根本不提供浏览器运行时；
sass.js是非官方移植版，体积大、不支持@use、无 source map - 现代构建工具（Vite/webpack dev server）的 HMR 编译速度更快、错误提示更准、支持热替换
零构建环境下的临时替代方案
如果真不能用任何构建工具（比如纯静态 HTML 演示页），唯一能“用上变量效果”的方式是：手动编译好内容，粘贴进内联 <style>。
例如，你写了：
@primary: #3498db;
.header { color: @primary; }
那就先用 lessc 编译出：
.header { color: #3498db; }
再复制进去：
<style>.header { color: #3498db; }</style>
这不是“HTML 使用变量”，只是把编译结果硬编码进去——变量逻辑完全丢失，改颜色就得重编译+重粘贴。
真正关键的分水岭不在语法差异，而在于是否接受「CSS 必须经过一道转换才能运行」这个事实。绕过它，就等于在要求浏览器执行一门它根本没设计去理解的语言。
