What is the correct way to use @media query in LESS?

Question

Screen resolution

How to properly use media query in LESS?
I have a bunch of files with styles, each style for its own pages or specific blocks on the page.
before, I just made a separate file and put absolutely everything related to the media query there.
The problem arose due to the size of this file, it is very difficult to edit such files, and if the style was deleted at all, then a zombie remained in the media query and there could be a lot of such zombies ...
now I collect everything through less, but the question remains how to write media styles correctly query
example (only for 1 file *less, and there may be 30...):
mix example

@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);
}

And now imagine such classes where you need to insert a media query of a cloud ... and + other files where the media query is also doher ...
and this approach does not inspire me so much, firstly, in each class, specify a bunch of media queries, and the second is at the output, I will get doher of media query entries ... well, i.e. in how many classes I indicated so many at the output and I will get ..
another option, the same mixes, but taking them out of the classes, but here is another problem .. you need to copy the class to the media query each time and then take into account whether the class has deleted .. in short, zombies appear ..
tell me how to do it correctly)) can the
plugin have a thread for grouping media query?
gulp-group-css-media-queries

Answer 1

Look at projects like bootstrap, for example:

.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;
  }
}

and in a separate file with variables

//== 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);