浏览器无法直接解析.scss或.less文件，必须先编译为CSS再引入HTML；Less用@声明变量、支持插值，Sass用$、作用域更严格；嵌套建议不超过3层；Mixin需谨慎传参并避免复杂逻辑。
浏览器根本不认识 .scss 或 .less 文件，直接在 HTML 中用 <link rel="stylesheet" href="style.scss"> 是无效的——这一步必须跳过。
HTML里不能直接加载Sass/Less源文件
所有预处理器代码都得先编译成标准CSS，浏览器才看得懂。你看到的“HTML中使用”，本质是：把编译后的 .css 文件引入 HTML，而不是原文件。
- 错误做法：
<link rel="stylesheet" href="main.less">（404 或无样式） - 正确路径：写
main.scss→ 本地编译出main.css→ 在 HTML 中引入<link rel="stylesheet" href="main.css"> - 开发时若想“热更新”，得靠构建工具（如 Vite、Webpack）或编辑器插件（如 VS Code 的 Easy Sass），它们监听文件变化并自动编译
Less变量和Sass变量写法差异直接影响维护性
变量是提升效率的第一步，但写错语法会导致编译失败或值不生效。
- Less 用
@声明：@primary-color: #2563eb;；Sass（SCSS）用$：$primary-color: #2563eb; - Less 支持变量插值：
background-@{property}: #fff;；Sass 不支持这种写法，得用#{$variable}拼接字符串 - Less 变量作用域是“就近覆盖”，Sass 是“块级作用域”，同名变量在嵌套内重定义不会污染外层
- 别在变量名里用连字符（如
@font-size-large），Less 允许，但某些旧版编译器会报错；推荐下划线@font_size_large或驼峰
嵌套层级超过3层就容易失控
嵌套让结构清晰，但也埋下性能和可维护隐患。
立即学习“前端免费学习笔记（深入）”；
- Less/Sass 都支持
.card { .header { h1 { color: $text-primary; } } }，但编译后生成的是.card .header h1，选择器权重变高，可能覆盖不到预期元素 - 超过3层嵌套后，CSS 文件体积增长明显，尤其配合
:hover、@media多重嵌套时 - 真实项目中，建议只对语义明确的父子关系嵌套（如
.modal .body .content），避免为缩写而嵌套（如.btn .icon .svg path） - Less 的
&引用父选择器比 Sass 更灵活，比如.btn { &--primary { ... } }可生成.btn--primary，但 Sass 同样支持，写法一致
Mixin传参不加类型检查，容易传错值
Mixin 是复用核心逻辑的关键，但参数没约束，运行期才暴露问题。
- Less 示例：
.border(@w: 1px, @style: solid, @color: #000) { border: @w @style @color; }，调用时写成.border(1px, #000)就会把颜色当成了样式，编译出错 - Sass 提供
@warn和type-of()做基础校验，比如判断$color是否为颜色值，但需手动加 - 带默认值的参数要放在最后，否则调用时无法跳过中间参数（Less 不支持命名参数，Sass 支持
@include border($color: red)） - 别把复杂逻辑塞进 mixin，例如“根据屏幕宽度生成多组 media 查询”更适合写成函数（Sass 的
@function）或单独的响应式模块
真正卡住人的往往不是语法，而是编译时机和变量作用域——改了 _variables.less 却没刷新页面，或者嵌套太深导致 CSS 选择器权重爆炸，这些细节比“怎么写”更影响效率。
