PostCSS Скомпилируйте Sass Media запросы вне порядок? ⇐ CSS

[Anonymous]

Я использую простую сборку WebPack с PostCSS. Если я не объявляю конкретный медиа -микшин в первом разделе SCSS страницы, но использую этот специфический медиа -миксин запросов в следующем разделе, что выходы Media Query после других точек останова (даже если у меня они определяют в определенном порядке в моем файле микшинов). Вот мой код: < /p>

strong>_variables.scss

Код: Выделить всё

$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
< /code>

strong>_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;
}
}
< /code>

strong>_page.scs

// ————————————————————————————————————————————————————————————
// 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;
}
}
}
< /code>

[b] main.scss < /strong> (импортирующие файлы) < /p>

@import "/base/variables";
@import "/base/mixins";
@import "page";
< /code>

Как вы можете видеть в _page.scss < /code>, я люблю объявлять точки останова прямо в каждом разделе (или строке), когда я спускаюсь по странице. The problem is since I didn't declare the @include md-screen

breakpoint on the first section, HERO SECTION, it comes after the @include xl-screen breakpoint in the output CSS and overrides the styles of the largest breakpoint:

output CSS:[/b]

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;
}
}
< /code>

Значит ли это, что моя практика объявления точек останова в каждом разделе не является лучшим способом? Должен ли я объявить все точки останова в конце каждого файла, таким образом, если ничто не изменится в одном разделе в определенной точке останова, мне не нужно объявлять эту точку останова, чтобы заставить ее компилировать в правильном порядке? Есть ли способ получить медиа-запросы для вывода в порядке, который они объявлены в файле Mixins, независимо от того, когда микшины вызываются в CSS? Я хотел бы применить медиа -запросы, как я, но если есть лучший способ (например, в конце файлов), пусть будет так.

Подробнее здесь: https://stackoverflow.com/questions/601 ... t-of-order