sass 的高效使用在于克制而非炫技：嵌套不超过3层、变量命名规范（scss用$、less用@）、混合仅用于带参数的逻辑复用，且需明确作用域与默认值。
直接说结论：Sass 的嵌套、变量、混合不是“写得越炫越高效”，而是越贴近语义结构、越克制越可控。滥用嵌套或变量命名随意，编译后反而更难调试、更难覆盖。
变量命名和作用域必须区分 SCSS 和 Less 语法
SCSS 变量用 $ 开头，比如 $primary-color；Less 用 @，比如 @primary-color。混用会导致编译器直接报错，常见错误信息是 Invalid CSS after "$": expected selector, was ";" 或类似解析失败提示。
- SCSS 中同名变量在嵌套块内重定义，只影响该块（块级作用域），外层不变
- Less 是就近覆盖，
@color: red; .a { @color: blue; } .b { color: @color; }会取blue，容易误判 - 别用连字符命名变量，
$font-size-large在旧版 Node Sass（如 v4.x）里会被解析成减法运算，改用$font_size_large或$fontSizeLarge - 需要可被下游覆盖的默认值，用
!default：$border-radius: 4px !default;
嵌套层级超过 3 层就该警惕选择器权重和体积问题
写 .card { .header { .title { font-weight: bold; } } } 看似结构清晰，但编译后是 .card .header .title，权重高、复用性差，且一旦 HTML 结构微调（比如加了中间 wrapper），样式就失效。
- 真实项目中，仅对强语义父子关系嵌套，比如
.modal .body .content；避免为缩写而嵌套.btn .icon .svg - 媒体查询嵌套要收口：用
@media (min-width: 768px) { .card { display: flex; } }比把整个组件全塞进@media块里更可控 - 用
&处理修饰符和伪类，比如&--large生成.btn--large，&:hover生成.btn:hover，不推荐.btn { &:hover { ... } }套多层 - 嵌套 +
@each循环时注意输出爆炸，@each $key, $val in $map { .#{$key} { font-size: $val; } }若 map 有 20 项，就生成 20 条规则
混合（@mixin）不是万能胶，得看是否真需要复用逻辑
混合适合封装带参数、有计算或条件分支的样式逻辑，比如响应式断点、渐变背景、flex 布局工具类。纯静态声明（如 color: $text-primary）没必要抽成 @mixin，徒增调用成本。
- 带默认参数的混合更安全：
@mixin button-style($bg: $primary-color, $radius: 4px) { background: $bg; border-radius: $radius; } - 避免在混合里写嵌套规则，除非明确需要生成上下文相关选择器；否则优先用变量 + 简单声明
-
@include调用位置影响最终 CSS 顺序，若混合里含@media，它会原样插入到调用处，可能打乱响应式层级 - Vue / React 项目中，全局混合建议统一导出到
_mixins.scss，再通过@use "mixins" as *引入，避免@import的全局污染问题
真正卡住人的从来不是会不会写 @mixin 或 &，而是变量改了不敢动、嵌套深了不敢删、混合多了不知道哪条生效——这些都源于没在项目初期定好变量命名规范、嵌套边界和混合使用阈值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
