Проблема конкатенации media правил

108

29 ноября 2020, 22:10

Дело в том что при построении кода таким образом, когда @media правила разбросаны по всем файлам, появляется потребность в их конкатенации в одно правило(соответственно в одно правило определенной ширины).

Немного погуглив я нашел плагин gulp-merge-media-queries и изначально он отрабатывал нормально, пока я не заметил что анимация к кнопкам и меню которую я адаптировал через @media правила не работает.

Вместо нее выполняется общая анимация(т.е. анимация не занесенная ни в одно @media правило). То есть анимация компилировалась в продакшн файл, но не работала, хотя все остальные стили адаптива переключаются при изменении экрана.

Вопрос, как решить данную проблему?
Есть ли другие варианты конкатенации @media? Можно как-то по другому организовывать код не прибегая к таким плагинам?

Заранее спасибо.

Answer 1

Оставлю ответ с решением моей проблемы. Плагинов для этой цели я искать не стал, зато я нашел миксин. Вот он:

.mediaWidthSet(@minWidth, @maxWidth - 1, @ruleset){
    @media (min-width: @minWidth) and (max-width: @maxWidth - 1) {
        @ruleset();
    }
};

Первые два параметра принимают ширину окна, минимальную и максимальную. Из максимальной величины мы вычитаем один чтобы не было конфликтов стилей. Чтобы было понятней, допустим у нас есть два media правила. Одно начинается с 320px и заканчивается 560px, а другое начинается с 560px и заканчивается 768px, то есть у нас назревает конфликт в размере 560px. Чтобы такого не было мы вычитаем из максимального размера единицу(думаю отняв единицу вы ничего не потеряете) таким образом мы разрешаем конфликт и на выходе у нас будет 320px - 559px и 560px 767px. Естественно вы можете и прибавлять единицу и вообще настроить математическое вычисление по своему, но вычитать единицу из максимального значения это стандартный вариант. @ruleset - принимает набор переменных в которых будет хранится media код.

Example:

Entry:

@media1: {
   div {
      background: red;
   }   
};
@media2: {
   a {
      text-decoration: none;
   } 
};
mediaWidth(320px, 560px, {
    @media1;
    @media2;
});

Output:

@media(320px, 559px) {
   div {
      background: red;
   }  
   a {
     text-decoration: none;
   } 
};

Вот так можно решить проблему конкатенации media правил. Сразу задавайте все переменные. Желательно не пишите ширину как здесь, а вынесите ее в отдельные переменные. Надеюсь это кому-то поможет. Да прибудет с вами работающий код.