为什么Sass的@extend在合并媒体查询时会导致CSS失效？-css教程-PHP中文网

@extend 无法跨媒体查询生效，因为它只是静态复制选择器、不感知媒体查询上下文，导致样式被错误写入媒体查询块而浏览器不应用；安全替代方案是用 @mixin 抽取可复用声明并在对应上下文中调用。

为什么sass的@extend在合并媒体查询时会导致css失效？

因为 @extend 本身不感知媒体查询上下文，它只是静态地“复制选择器”，当跨媒体查询块使用时，Sass 会把被 extend 的选择器原样搬过去，但不会自动包裹进目标媒体查询作用域里——结果就是样式被写到错误的 CSS 作用域中，浏览器根本不会应用。

为什么 @extend 无法跨媒体查询生效

Sass 的 @extend 是编译期行为，它只做选择器字符串拼接，不分析 CSS 规则的作用域或嵌套逻辑。比如你在 @media (max-width: 768px) 里 @extend .btn，而 .btn 定义在常规样式块里，Sass 就会把 .btn 的所有声明直接塞进媒体查询块——但这些声明原本没绑定媒体条件，现在却“假装”在媒体查询里生效，实际浏览器只认规则所在位置的媒体上下文。

@extend 不会提升被 extend 的规则到当前媒体查询内，也不会为它生成新规则
被 extend 的基础类（如 .btn）若本身在媒体查询中定义，那它只在那个查询下存在；外部调用 @extend 时 Sass 找不到它，直接报错 "Undefined mixin or extend"
即使编译成功，生成的 CSS 常见表现为：样式出现在媒体查询块里，但选择器没匹配到任何元素，或覆盖关系错乱

替代方案：用 @mixin + 参数模拟 extend 行为

真正安全的做法是放弃跨媒体查询用 @extend，改用 @mixin 抽取可复用的声明块，并在需要的地方带上下文调用。

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

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

下载

把按钮公共样式写成 @mixin btn-base()，包含 padding、border、font-size 等，不包含选择器
在 @media (max-width: 768px) 块里调用 @include btn-base()，此时所有声明自然落在该媒体查询作用域内
如果需要复用选择器逻辑（比如多个类共享同一组样式），可用 @mixin btn-variant($class) 动态生成选择器，避免硬编码

示例：

@mixin btn-base() {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
}

@media (max-width: 768px) {
  .btn-mobile {
    @include btn-base();
    font-size: 0.875rem;
  }
}