如何基于父类存在与否使用SCSS修改媒体查询？

问题根源 #

你当前的Sass混入逻辑存在错误：当存在$media-query2时，生成的是.parent元素在媒体查询下的样式，而非.parent .content的样式。这就导致屏幕宽度在1201px-1400px区间时，.content的浅蓝色背景规则根本不存在，自然不会生效。

修复后的Sass代码 #

@mixin screen-is($size) {
  $media-query: "";
  $media-query2: "";

  @if $size == tablet {
    $media-query: '(min-width: 1000px) and (max-width: 1200px)';
    $media-query2: '(min-width: 1000px) and (max-width: 1400px)';
  } @else {
    @error 'Unknown size #{$size}';
  }

  // 修改核心逻辑：用.parent & 替代.parent，&代表当前调用混入的选择器（即.content）
  @if $media-query2 {
    .parent & {
      @media #{$media-query2} {
        @content;
      }
    }
  }

  @media #{$media-query} {
    @content;
  }
}

.content {
  @include screen-is(tablet) {
    background-color: lightblue;
  }
}

修复后效果说明 #

修复后会生成两组符合需求的CSS规则：

1. 当DOM存在.parent容器时，.content在1000px-1400px区间显示浅蓝色背景：

@media (min-width: 1000px) and (max-width: 1400px) {
  .parent .content {
    background-color: lightblue;
  }
}

2. 当DOM不存在.parent容器时，.content在1000px-1200px区间显示浅蓝色背景：

@media (min-width: 1000px) and (max-width: 1200px) {
  .content {
    background-color: lightblue;
  }
}

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