SCSS媒体查询异常：@extend规则未受媒体查询限制问题咨询

核心原因 #

SCSS 的@extend是通过合并选择器实现样式复用的：当你在媒体查询内部扩展一个全局作用域的类/占位符时，SCSS 会把媒体查询内的目标选择器（#wrap-nav .nav）直接添加到全局的被扩展规则中，导致继承的样式全局生效，而非仅在媒体查询条件内生效。

举个直观的编译逻辑示例：
假设你的全局.block定义是：

.block {
  display: block;
}

你在媒体查询中写#wrap-nav .nav {@extend .block;}，编译后会生成：

/* 全局生效的规则 */
.block, #wrap-nav .nav {
  display: block;
}

@media(max-width:1100px) {
  #wrap-nav .nav {
    /* 这里的样式其实已经通过全局规则生效了 */
  }
}

后续你在主文件中定义的#wrap-nav .nav {display:flex;}会被前面的全局display:block覆盖（选择器权重相同，代码顺序靠前的规则优先级更高），最终就出现了非媒体查询条件下样式依然生效的问题。

解决方案 #

方案一：用@mixin替代@extend（推荐）

将复用样式写成混入，在媒体查询内调用，确保样式仅作用在媒体查询范围内：

// generic.scss
@mixin block {
  display: block;
}

// layout.scss
@media(max-width:1100px) {
  #wrap-nav .nav {
    @include block;
  }
}

编译后只会在媒体查询内生成目标样式，不会污染全局作用域。

方案二：将被扩展的类/占位符放在相同媒体查询中

如果坚持使用@extend，把被扩展的规则也放到对应的媒体查询里，让选择器合并仅在媒体查询内部进行：

// generic.scss
@media(max-width:1100px) {
  .block {
    display: block;
  }
}

// layout.scss
@media(max-width:1100px) {
  #wrap-nav .nav {@extend .block;}
}

方案三：使用媒体查询内的占位符

定义仅在媒体查询内生效的占位符，再进行扩展，效果和方案二一致：

// generic.scss
@media(max-width:1100px) {
  %block {
    display: block;
  }
}

// layout.scss
@media(max-width:1100px) {
  #wrap-nav .nav {@extend %block;}
}

内容的提问来源于stack exchange，提问作者Moseleyi