CSS如何使用Sass进行样式的继承_通过占位符优化CSS选择器-css教程-PHP中文网

占位符选择器 %placeholder 必须定义在顶层作用域、不可嵌套、不可动态命名、跨文件需显式导入；@extend 不支持媒体查询内定义的占位符，链式继承按源码顺序合并声明，慎用于局部或响应式场景。

css如何使用sass进行样式的继承_通过占位符优化css选择器

占位符本身不输出 CSS，只有被 @extend 调用时才生效；写错位置或跨文件未正确引入，就完全没效果。

必须定义在能被调用的作用域内：如果放在嵌套规则里（比如 .card { %hidden { display: none; } }），外部无法 @extend %hidden
不能用变量拼接名：%#{$name} 会报错，Sass 不支持动态占位符名
跨文件使用时，必须用 @use 或 @import 显式加载——只 @use "vars" 不行，得 @use "mixins" as * 或明确 @use "mixins" 后写 @extend mixins.%reset

前者复用样式声明但不产生额外选择器，后者会把目标类的所有选择器链都复制进来，极易膨胀。

@extend %btn-base：只把 %btn-base 里的声明（如 padding: 8px）合并进调用它的选择器，最终 CSS 里看不到 %btn-base
@extend .btn-base：假设 .btn-base 是 button.btn-base, .btn.btn-base，那所有 extend 它的地方都会追加这两条选择器，.primary-btn 可能变成 button.btn-base, .btn.btn-base, .primary-btn
一旦被 extend 的类本身用了属性选择器（如 [disabled]）或伪类（如 :hover），这些也会被复制，可能触发意外覆盖

因为 @extend 的解析发生在编译期，而媒体查询是运行时逻辑；Sass 默认不允许跨媒体查询块继承。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

下面写法无效：

@media (max-width: 768px) {
  %mobile-text { font-size: 14px; }
}
.foo { @extend %mobile-text; }

—— %mobile-text 在媒体查询内，外部无法访问

正确做法是把占位符提至顶层，再在媒体查询中控制其内容：

%text-style { line-height: 1.5; }
@media (max-width: 768px) {
  %text-style { font-size: 14px; }
}
p { @extend %text-style; }

Sass 按源码顺序合并声明，同名属性后写的覆盖先写的；但选择器权重不会叠加，这点和 CSS 原生规则一致。

如果 %a { color: red; }、%b { color: blue; }，然后 .x { @extend %a; @extend %b; }，最终 color: blue
但若 %a 定义了 font-weight: bold，%b 没定义，则保留 bold；继承不是“全量覆盖”，而是声明级合并
慎用多重 extend：当两个占位符都定义了 margin，且值类型不同（如 margin: 0 vs margin-top: 10px），Sass 不会智能合并，后者会完全取代前者