如何使用SCSS的%占位符选择器来减少CSS文件中的重复代码？-css教程-PHP中文网

%占位符比普通类名更省体积，因其编译后不输出css规则，且@extend时合并选择器；而普通类名会保留自身规则并可能引入冗余伪类。

如何使用scss的%占位符选择器来减少css文件中的重复代码？

直接用 @extend 普通类名（比如 .btn）会导致 CSS 体积不减反增；真正能压缩输出、避免重复的，是 % 占位符 + @extend 的组合，但必须满足三个前提：扁平命名、无嵌套定义、跨文件正确引入。

为什么 `%button-base` 比 `.button-base` 更省体积

占位符以 % 开头，编译后完全不输出任何 CSS 规则；而普通类名一旦定义，哪怕没人用，也会原样出现在最终 CSS 里。更关键的是：@extend %button-base 会让所有调用它的选择器合并成一条规则，比如 .primary-btn, .secondary-btn { … }；但 @extend .button-base 会把 .button-base 自身那条规则也保留下来，还可能拖入它的伪类（.button-base:hover），造成冗余。

%reset-text 被 .title、.subtitle、.caption 同时继承 → 编译后只有一条 .title, .subtitle, .caption { margin: 0; line-height: inherit; ... }
.reset-text 被同样三个类继承 → 编译后多出一条无用的 .reset-text { ... }，且三个类各自带完整声明副本
如果 .reset-text 本身含 &:hover，那 .title:hover、.subtitle:hover 全都会被生成——这通常不是你想要的

`@extend %placeholder` 在嵌套结构里容易失效

SCSS 的 @extend 只作用于当前选择器本身，不会穿透嵌套层级。写成 .card { @extend %bordered; &__header { color: red; } }，只有 .card 会获得 %bordered 的样式，.card__header 不会自动继承。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

想让子元素也应用同一套基础样式？得单独写 .card__header { @extend %bordered; }
不要在 @media 块内定义 % —— 它会被限制在媒体查询作用域里，外部 @extend 会报错 Extending unknown pseudo-class "%xxx"
避免深度嵌套定义占位符，比如 .modal .content %base，否则继承时会生成 .modal .content .alert 这种冗长选择器

跨文件使用 `%` 占位符必须显式引入

Dart Sass v7.0+ 默认禁止隐式跨文件 @extend，% 占位符不会自动暴露到其他文件。

用 @use "base" as * 后，可直接写 @extend %reset-text
用 @use "base"（不加 as *），则必须写 @extend base.%reset-text
不能循环依赖：A 文件 @use "B"，B 文件就不能再 @use "A"
如果编译报错 Warning: You're extending a selector that isn't defined，先检查 @use 顺序和路径是否正确，而不是加 !optional 掩盖问题

哪些场景该坚决放弃 `%`，改用 `@mixin`

% 是纯静态复用，零灵活性；一旦需要传参、条件分支或包裹 @media，它就无能为力。

要给不同组件加不同圆角？@mixin border-radius($r) 可传值，%rounded 只能写死 border-radius: 4px
响应式字体大小？@mixin responsive-font($min, $max) 内部可放 @media，%text-sm 无法做到
多个类只需复用其中几个属性（比如只要 display 和 vertical-align，不要 margin）？% 是全量继承，此时 @include 小型原子 mixin 更精准
用 BEM 或 CSS Modules？@extend 会强行合并选择器，破坏命名空间隔离，这时 @mixin 是唯一安全选项