Как объединить медиа запросы Less?

Question

[Сергей]

Всем привет!
Есть миксин-функция Less:

.media-s(@rules) {
  @media screen and (max-width: 1023px) {
    @rules();
  }
};

div{
  .media-s({width: 100%});
  .media-s({color: #000});
}

Которая компилируется в CSS код:

@media screen and (max-width: 1023px) {
  div {
    width: 100%;
  }
}
@media screen and (max-width: 1023px) {
  div {
    color: #000;
  }
}

Что меня не очень-то устраивает.

Как же правильно переписать или использовать миксин, чтобы избавиться от копирования одинаковых медиа запросов и получить что-то подобное:

@media screen and (max-width: 1023px) {
  div {
    width: 100%;
    color: #000;
  }
}

Answer 1

[TheBububo]

Используйте плагин для галпа (или для вашего сборщика) который объединяет медиа запросы
например https://www.npmjs.com/package/gulp-merge-media-queries

Answer 2

[Сергей delphinpro]

div{
  .media-s({
    width: 100%;
    color: #000;
  });
}

так вроде в less

Comments

[bro-dev]

Имеется ввиду разные селекторы. То есть в разных кусках кода пишем этот миксин а он в конце файла потом все вместе собирает под одним медиа запросом.

[Сергей delphinpro]

Роман Бережнов: В вопросе селектор один.

[Сергей]

Видимо, слишком простой пример задал. Не подумайте, что я садист или мазохист, но уж очень интересный для меня вопрос. А вот такая конструкция:

.media-s(@rules) {
media screen and (max-width: 1023px) {
@rules();
}
};

.media-m(@rules) {
media screen and (max-width: 768px) {
@rules();
}
};

div{
.media-s({
width: 100%;
color: #000;
});
.media-m({
width: 90%;
color: #000;
});
}

span{
.media-s({
color: #fff;
});
.media-m({
color: red;
});
}

Все равно идет разделение медиа запросов. Наверно, от этого не избавиться

[Сергей delphinpro]

Сергей: вот решение - https://www.npmjs.com/package/gulp-combine-mq