混入中的媒体查询被覆盖

@mixin my-mixin {
  // 混入中的样式规则
  color: red;

  @media (max-width: 768px) {
    // 混入中的媒体查询样式规则
    color: blue;
  }
}

.my-element {
  // 使用混入，并包含自己的媒体查询
  @include my-mixin;

  @media (max-width: 480px) {
    // 自己的媒体查询样式规则
    color: green;
  }
}

@mixin my-mixin($media-query: null) {
  // 混入中的样式规则
  color: red;

  @if $media-query {
    @media #{$media-query} {
      // 混入中的媒体查询样式规则
      color: blue;
    }
  }
}

.my-element {
  // 使用混入，并传递自定义的媒体查询
  @include my-mixin("(max-width: 768px)");

  @media (max-width: 480px) {
    // 自己的媒体查询样式规则
    color: green;
  }
}