Как обьеденить содержимое медиа миксинов в sass?

Question

[devilsD]

Пример:

@mixin media-sm() {
    @media (min-width: 700px) {
        @content;
    }
}

h1{
   font-size: 40px;
   @include media-sm {
        font-size: 30px;
   }
}

h2{
   font-size: 20px;
   @include media-sm {
        font-size: 15px;
   }
}

Удобно с помощью миксинов писать адаптивные стили таким образом, непосредственно в конкретном классе. Но результат генерации не радует.
В генерируемом файле каждый класс обернут в отдельный медиа-запрос. Возможно ли как-то обьеденить содержимое миксинов под один медиа-запрос, сохраняя структуру исходника. Или посоветуйте более правильный подход

Answer 1

[Дуболом Одноклеточный]

Создай postcss.config.js, и загрузи через npm css-mqpacker (он относится к PostCSS) и подключи его в postcss конфиг.
Вот например статья: https://webdesign.tutsplus.com/ru/tutorials/using-...
Либо... pogugli.com/?353838

Comments

[devilsD]

То что нужно. Думал это решаемо возможностями препроцессора, не в ту строну смотрел.

[Дуболом Одноклеточный]

devilsD, Sass, не автоматизирует процессы. Поэтому создали PostCSS. Тогда в 2006 (когда создали сасик) это даже им в голову прийти не могло. Кстати, это также оптимизирует сайт

[devilsD]

Та у меня руки как то не доходили до postcss, вернее вполне хватало возможностей sass, думал что это очередной препроцессор)). Но хватило 15мин гугля, и это уже постоянный инструмент. Особенно радует что есть свой конфиг, и без лишних танцев с бубном живет с вебпаком.

[Дуболом Одноклеточный]

devilsD, Дада, я тоже думал что какой то очередной препроцессор, который снова "Убрал предыдущие ошибки препроцессоров", а оказывается полезная штука, которой нет аналога)