@extend在嵌套中会让选择器权重失控，因其将被继承选择器原样拼接到当前嵌套路径末尾，导致父级上下文层层叠加、特异性指数级上升；推荐改用@mixin封装声明或css自定义属性实现可控复用。
为什么@extend在嵌套里会让选择器权重失控
@extend不是复制样式声明，而是把被继承的选择器原样拼接到当前嵌套路径末尾。一旦它出现在多层嵌套中，父级上下文就会层层叠加，导致编译出的选择器特异性（specificity）指数级上升。
比如：.card { .header { h1 { @extend %title; } } }，可能生成.card .header h1和.card .header .title两条规则——后者权重直接从 0-0-1 跳到 0-2-1。更糟的是，如果%title本身又@extend了另一个占位符，权重就完全不可预测。
- 同一
%placeholder被多个嵌套块调用，会重复输出多条高权重规则，CSS体积和覆盖难度同步上升 - 外部类（如
.btn）被塞进.modal或.sidebar嵌套块里@extend，等于给按钮样式强行加上模块上下文，语义错位且难以解耦 -
@extend无法跨@media或伪类作用域生效，想在&:hover里复用？它直接失效
@mixin才是复用选择器逻辑的正确姿势
@mixin不生成新选择器，只原样插入声明块，零新增层级、零权重污染。它适合封装有内在逻辑关联的样式组合，比如弹性布局、响应式边距、主题色联动等。
示例：@mixin text-emphasis { color: $brand-primary; font-weight: 600; }，调用时写.link { @include text-emphasis; }，输出就是干净的.link { color: #007bff; font-weight: 600; }。
- 支持参数和默认值：
@mixin border-radius($r: 4px) { border-radius: $r; }，调用@include border-radius(8px)或留空都行 - 需要包裹
@media或&:hover？@mixin能完整保留嵌套结构，@extend做不到 - 避免在
@mixin里误用&——它指向调用位置的父选择器，容易生成意外选择器；更稳妥的做法是让调用者控制结构，@mixin只管声明
什么时候该用CSS自定义属性而不是@mixin
如果复用的只是单一可变值（颜色、间距、圆角），优先用--color-primary这类自定义属性。它不产生新CSS规则，覆盖只需重设变量，完全绕开选择器权重问题。
比如：.component { --text-color: var(--brand-primary); color: var(--text-color); }，换主题时只要改:root { --brand-primary: #ff6b35; }，所有引用处自动更新。
-
@mixin适合同时改background、color、border、transition等一整套行为；而CSS变量只解决“值替换”，不解决“规则结构复用” - 变量无法控制
@media包裹逻辑，也无法表达&:hover::before这种嵌套伪元素关系 - 别在
@mixin里写@import或@use——它们应在顶层统一管理，否则可能引发重复导入或作用域不可见
真正要警惕的不是语法，是职责混淆
权重失控的根因，往往不是@extend或@mixin用错了，而是你本该拆成两个独立class的逻辑，硬靠嵌套+继承捆绑在一起了。比如把“按钮尺寸”和“卡片标题排版”塞进同一个%base-style，再让两者互相@extend，等于人为制造耦合。
检查你的SCSS文件：如果一个@mixin或%placeholder被超过3个不同语义模块调用，大概率说明它承担了不该承担的职责——要么拆分，要么改用变量控制值，而不是用选择器合并控制结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
