Опубликовать CSS компиляцию медиазапросов SASS не по порядку? - PullRequest
Новая
       13

Опубликовать CSS компиляцию медиазапросов SASS не по порядку?

1 голос
/ 10 февраля 2020

Я использую простую сборку веб-пакетов с Post CSS. Если я не объявляю указанный c миксин медиа-запроса в первом разделе S CSS страницы, но использую этот c миксин медиа-запроса в следующем разделе, этот медиа-запрос выводит после другие точки останова (даже если они определены в указанном порядке c в моем файле mixins). Вот мой код:

_variables.s css

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

_mixins.s css

@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.s css

// ————————————————————————————————————————————————————————————
// 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.s css (импорт файлов) 

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

Как вы можете видеть в _page.scss, мне нравится объявлять точки останова прямо в каждом разделе (или строке) как I go вниз по странице. Проблема в том, что я не объявил точку останова @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;
  }
}

Означает ли это, что моя практика объявления контрольных точек в каждом разделе - не лучший способ? Должен ли я объявлять все точки останова в конце каждого файла, чтобы, если ничего не изменилось в одном разделе с определенной c точкой останова, мне вообще не нужно объявлять эту точку останова, чтобы заставить ее компилироваться в правильном порядке? Есть ли способ заставить медиазапросы выводить в порядке, в котором они объявлены в файле mixins, независимо от того, когда миксины вызываются в CSS?

Мое намерение - получить точки останова для вывода от наименьшего к наибольшему, поскольку я использую подход «сначала мобильный», минимальной ширины. Я хотел бы применять медиа-запросы, как я делаю, но если есть лучший способ (например, в конце файлов), пусть будет так.

...