SCSS嵌套媒体查询未按预期生效，如何解决标题样式冲突？

你的代码问题出在**header-accent-*系列mixin的结构设计上：每个mixin内部都自带了完整的媒体查询适配逻辑，当你在.heading的断点媒体查询中再次导入这些mixin时，会生成嵌套的媒体查询结构**，导致样式优先级混乱。

编译后的CSS会出现类似这样的无效嵌套：

.heading {
  /* header-accent-10的移动端基础样式 */
}
@media (min-width: 768px) {
  .heading {
    /* header-accent-20的基础样式 */
    @media (min-width: 768px) {
      /* header-accent-20自带的tablet样式 */
    }
  }
}

内层重复的媒体查询会覆盖外层断点的样式，自然达不到你期望的"不同断点切换对应字体规格"的效果。

方案一：拆分基础样式与断点适配 #

把字体的基础属性和断点适配逻辑分离，让mixin只提供纯基础样式，断点控制统一在.heading类中处理：

@use "sass:math";

@function vw($size, $view: 360) {
  $vwSize: (calc($size / $view) * 100);
  @return #{$vwSize}vw;
}

@function vw_tablet($size) {
  @return vw($size, 1024);
}
@function vw_desktop($size) {
  @return vw($size, 1440);
}

@mixin respond($breakpoint) {
  @if $breakpoint==tablet {
    @media (min-width: 768px) {
      @content;
    }
  }
  @if $breakpoint==desktop {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

@mixin minwidth_tablet {
  @include respond(tablet) {
    @content;
  }
}
@mixin minwidth_desktop {
  @include respond(desktop) {
    @content;
  }
}

// 仅定义基础字体属性的mixin，不带媒体查询
@mixin header-accent-base($size, $lineHeight) {
  font-family: "Work Sans", sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: vw($size);
  line-height: vw($lineHeight);
}

.heading {
  @include header-accent-base(48, 54);
  color: $fg-70;

  @include minwidth_tablet {
    @include header-accent-base(54, 64);
    font-size: vw_tablet(54);
    line-height: vw_tablet(64);
  }
  @include minwidth_desktop {
    @include header-accent-base(64, 72);
    font-size: vw_desktop(64);
    line-height: vw_desktop(72);
  }
}

方案二：给mixin添加开关参数 #

保留原mixin结构，新增参数控制是否输出内部媒体查询，避免嵌套冲突：

// 修改所有header-accent系列mixin，添加开关参数
@mixin header-accent-30($include-media: true) {
  font-family: "Work Sans", sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: vw(64);
  line-height: vw(72);

  @if $include-media {
    @include minwidth_tablet() {
      font-size: vw_tablet(64);
      line-height: vw_tablet(72);
    }
    @include minwidth_desktop() {
      font-size: vw_desktop(64);
      line-height: vw_desktop(72);
    }
  }
}

// 同理修改header-accent-20、header-accent-10，都添加$include-media参数

.heading {
  @include header-accent-10; // 移动端默认启用内部媒体查询
  color: $fg-70;

  @include minwidth_tablet {
    @include header-accent-20($include-media: false); // 关闭内部媒体查询，仅输出基础样式
  }
  @include minwidth_desktop {
    @include header-accent-30($include-media: false);
  }
}

用**Sass映射(Map)**统一存储所有字体规格，配合通用mixin调用，减少重复代码，提升可维护性：

@use "sass:map";
@use "sass:math";

@function vw($size, $view: 360) {
  $vwSize: (calc($size / $view) * 100);
  @return #{$vwSize}vw;
}

@mixin respond($breakpoint) {
  @if $breakpoint==tablet {
    @media (min-width: 768px) {
      @content;
    }
  }
  @if $breakpoint==desktop {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

// 集中管理所有字体规格
$header-accent-styles: (
  10: (
    mobile: (size: 48, line-height: 54),
    tablet: (size: 54, line-height: 64, view: 1024),
    desktop: (size: 48, line-height: 54, view: 1440)
  ),
  20: (
    mobile: (size: 54, line-height: 64),
    tablet: (size: 54, line-height: 64, view: 1024),
    desktop: (size: 54, line-height: 64, view: 1440)
  ),
  30: (
    mobile: (size: 64, line-height: 72),
    tablet: (size: 64, line-height: 72, view: 1024),
    desktop: (size: 64, line-height: 72, view: 1440)
  )
);

// 通用调用mixin
@mixin header-accent($level, $breakpoint: mobile) {
  $style: map.get($header-accent-styles, $level);
  $params: map.get($style, $breakpoint);
  
  font-family: "Work Sans", sans-serif;
  font-style: normal;
  font-weight: 800;
  
  @if map-has-key($params, view) {
    font-size: vw(map.get($params, size), map.get($params, view));
    line-height: vw(map.get($params, line-height), map.get($params, view));
  } @else {
    font-size: vw(map.get($params, size));
    line-height: vw(map.get($params, line-height));
  }
}

.heading {
  @include header-accent(10);
  color: $fg-70;

  @include respond(tablet) {
    @include header-accent(20, tablet);
  }
  @include respond(desktop) {
    @include header-accent(30, desktop);
  }
}

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