Как правильно использовать @media query в LESS?

Question

[Yuriy]

Как правильно использовать media query в LESS?

У меня есть кучу файлов со стилями, каждый стиль под свои страницы или конкретные блоки на странице.

раньше я делал просто отдельный файл и туда помещал абсолютно все что связанно с media query.
Проблема возникала по факту объёма этого файла, править такие файлы очень сложно, а если стиль вообще удалил, то в media query остался зомбак и таких зомбаков могло быть дохера...

сейчас я все собираю через less, но вопрос остался как правильнее писать стили media query

пример (только для 1 файла *less, а их может быть 30...):

пример с миксом

@screen1: 992px;
@screen1: 768px;
@screen2: 640px;
@screen3: 480px;
@screen4: 360px;
@screen5: 320px;

.mobile(@rules,@screen) {
  @media (min-width: @screen) { @rules(); }
}

.class1 {
     width:1000px;
     .mobile({
          width:800px;
     },@screen1);
     .mobile({
          width:600px;
     },@screen2);
     .mobile({
          width:400px;
     },@screen3);

    ... etc

}
.class2{
     font-size:100%;

     .mobile({
          font-size:80%;
     },@screen1);
     .mobile({
          font-size:60%;
     },@screen2);
     .mobile({
          font-size:40%;
     },@screen3);
}

А теперь представьте таких классов где нужно вставить media query куева туча... а + ещё другие файлы где так же дохера media query...

и такой подход меня не столь внушает, во первых в каждом классе указывать кучу media query, а второе это на выходе я получу дохера записей о media query... ну т.е. в скольких классах указал столько на выходе и получу..

другой вариант, то же миксы, но вынос за пределы классов, но тут другая беда.. нужно каждый раз копировать класс в media query потом учитывать удалился ли класс.. короче появляются зомбаки...

подскажите как правильнее это делать ))

может плагин есть какой нить для группировки media query?
gulp-group-css-media-queries

Answer 1

[Максим Тимофеев]

Подсмотрите у проектов типа bootstrap, например:

.container {
  .container-fixed();

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

и в отдельном файле с переменными

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);

Comments

[Yuriy]

у меня так же.. вопрос немного в другом был)) уже разобрался... плагин gulp-group-css-media-queries творит чудеса))