css - PostCSS 乱序编译 SASS 媒体查询？

Question

我正在使用带有 PostCSS 的简单 webpack 构建。如果我没有在页面 SCSS 的第一部分中声明特定的媒体查询 mixin，但在下一部分中使用该特定的媒体查询 mixin，则该媒体查询在其他断点之后输出（即使我在特定的在我的 mixins 文件中订购）。这是我的代码：

_variables.scss

$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;

_mixins.scss

@mixin sm-screen {
  @media screen and (min-width: #{$sm-screen}) {
      @content;
  }
}

@mixin md-screen {
  @media screen and (min-width: #{$md-screen}) {
      @content;
  }
}

@mixin lg-screen {
  @media screen and (min-width: #{$lg-screen}) {
      @content;
  }
}

@mixin xl-screen {
  @media screen and (min-width: #{$xl-screen}) {
      @content;
  }
}

@mixin screen-size($screen) {
  @media screen and (min-width: $screen) {
      @content;
  }
}

_page.scss

// ————————————————————————————————————————————————————————————
// HERO SECTION
// ————————————————————————————————————————————————————————————
  #hero-section {
    .hero-heading {
      font-size: 2rem;
    }

    @include sm-screen {
      .hero-heading {
        font-size: 5rem;
      }
    }

    @include lg-screen {
      .hero-heading {
        font-size: 6.5rem;
      }
    }

    @include xl-screen {
      .hero-heading {
        font-size: 6.5rem;
      }
    }
  }


// ————————————————————————————————————————————————————————————
// INTRO SECTION
// ————————————————————————————————————————————————————————————
  #intro-section {
    .icon-group {
      background: red;
    }

    @include md-screen {
      .icon-group {
        background: yellow;
      }
    }

    @include xl-screen {
      .icon-group {
        background: blue;
      }
    }
  }

main.scss（导入文件）

@import "/base/variables";
@import "/base/mixins";
@import "page";

正如您在 中看到的_page.scss，我喜欢在向下浏览页面时在每个部分（或行）内声明断点。问题是因为我没有@include md-screen在第一部分声明断点HERO SECTION，它出现在@include xl-screen输出 CSS 中的断点之后并覆盖了最大断点的样式：

输出 CSS：

body.home #intro-section .icon-group {
  background: red;
}

@media screen and (min-width:1200px) {
  body.home #intro-section .icon-group {
    background: blue;
  }
}

@media screen and (min-width:768px) {
  body.home #intro-section .icon-group {
    background: yellow;
  }
}

这是否意味着我在每个部分声明断点的做法不是最好的方法？我是否应该在每个文件的末尾声明所有断点，这样如果在特定断点的一个部分中没有任何变化，我根本不需要声明该断点以使其以正确的顺序编译？有没有办法让媒体查询按照它们在 mixins 文件中声明的顺序输出，无论何时在 CSS 中调用 mixin？

我的目的是让断点从最小到最大输出，因为我使用的是移动优先、最小宽度方法。我很想像我正在做的那样应用媒体查询，但如果有更好的方法（例如在文件末尾），那就这样吧。

标签： csssassmediabreakpoints