HTML本身不支持CSS预处理器，link标签只能引入编译后的.css文件；@mixin、@variable等语法是构建阶段由sass-loader或less-loader处理的，浏览器原生CSS解析器无法识别，直接使用会导致样式失效或报错。
直接说结论：HTML 本身不支持任何 CSS 预处理器，link 标签只能引入编译后的 .css 文件；所谓“在 HTML 中用 Sass/Less”，本质是构建阶段的事，不是运行时的事。
为什么不能直接在 HTML 里写 @mixin 或 @color: red;
浏览器解析 HTML 时，遇到 <style> 或 <link href="xxx.less">，只会按标准 CSS 规则处理。Sass 的 @mixin、Less 的 @variable、嵌套语法、@each 等——全是预处理器自定义的语法糖，原生 CSS 解析器根本不认识，会直接报错或静默忽略。
常见错误现象：
- 把
main.less直接丢进<link href="main.less">→ 页面无样式，控制台报 404 或 MIME 类型错误 - 在
<style lang="scss">里写 SCSS（比如 Vue 单文件组件外的纯 HTML）→ 浏览器当无效 CSS 处理，样式不生效 - 用
<script type="text/less">引入 Less 并依赖客户端编译 → 仅限开发调试，生产环境禁用（性能差、无缓存、无法 Tree-shaking）
less-loader 和 sass-loader 是谁在用？
它们是 Webpack/Vite 等构建工具的模块加载器，只在打包时起作用，和 HTML 运行时完全无关。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- Vue CLI / Vite / Create React App 等现代脚手架默认已集成
sass-loader或less-loader，只需安装对应依赖：npm install -D sass或npm install -D less - Webpack 手动配置时，
module.rules中必须匹配/\.s[ac]ss$/或/\.less$/，且use链中 loader 顺序不能错：通常是css-loader → postcss-loader → sass-loader - 如果用 Vite，
import './index.scss'能直接工作，但前提是文件后缀名正确、sass包已安装；Vite 不会自动 fallback 到node-sass，必须用sass（Dart Sass）
面试常问的“Sass 和 Less 差在哪”，关键看这三点
别背功能列表，聚焦真实协作痛点：
-
变量未定义行为：Less 写
@width: @height * 2;但@height没声明 → 静默转成width: 0;；Sass 同样代码直接报Undefined variable "$height"，强制暴露问题 -
嵌套中
&的行为：Less 允许& + &输出两个独立选择器；Sass 默认报错，必须写成& + #{&}—— 表面啰嗦，实则避免意外生成.btn + .btn这类难以调试的选择器 -
循环能力：要批量生成响应式工具类（如
.p-1,.p-2,.p-sm-1），Sass 用@each或@for一行搞定；Less 得靠递归 mixin，参数漏写或终止条件错就卡死编译
真正容易被忽略的是：选 Sass 还是 Less，往往不是语法喜好问题，而是团队里谁负责维护构建配置、谁来查凌晨三点的 CI 编译失败日志——Sass 报错带列号、变量覆盖需显式 !default、@extend 语义明确，这些细节在百人协作项目里省下的 debug 时间，远超学习成本。
