Less Language Variable as Media Query

Media query can be placed into a variable and reused on multiple places. It is very similar to selectors escaping.

Sample input:

@singleQuery: ~"(max-width: 500px)";
@media screen, @singleQuery {
  set {
    padding: 3 3 3 3;
  }
}

compiles into:

@media screen, (max-width: 500px) {
  set {
    padding: 3 3 3 3;
  }
}

Difference Between Less.js and Less4j

Less.js does not support partially replaces media queries. Following input is illegal in less.js:

@partial: ~"(max-width: 600px)";
@media screen and @partial {
  set {
    padding: 3 3 3 3;
  }
}

Less4j is able to compile it, but it produces a warning:

@media screen and (max-width: 600px) {
  set {
    padding: 3 3 3 3;
  }
}

WARNING 2:8 Usage of less4j only feature - input is incompatible with less.js. Variable can not be used to replace only part of media query, it must contain the whole query.