Less, is it possible to assign new values ​​to @variables via @media query?

Question

css

Can I do in less like this

@gap: 30px;
@media only screen and (max-width: 1440px)  {
    @gap: 40px;
}

Of course, that's not how it works, but maybe I'm doing something wrong?

Answer 1

This article habrahabr.ru/post/130089 seems to use approximately what you need

Answer 2

Well, according to your logic, it turns out that the record should somehow be like this:

@media only screen and (max-width: 1440px)  {
    40px;
}

Of course it won't work.
Therefore, you must first make a mixin to use it, for example:

.gap(30px){padding:@gap} 
@media only screen and (max-width: 1440px)  {
    .gap(40px); // padding: 40px;
}

If you write without a parameter, then the first values ​​will be substituted:

.gap(30px){padding:@gap} 
@media only screen and (max-width: 1440px)  {
    .gap; // padding: 30px;
}

Either already or do something like:

@gap: 30px; 
@media only screen and (max-width: 1440px)  {
    padding: (@gap + 10px);
}

Answer 3

The answer is probably late, but I think the rest will be useful!
For those who can only afford to support relatively modern browsers (Chrome 49+, FF 31+, no IE), you can use css variables.
Here is the browser support chart from "Can I Use".

html {
  --width-var: 244px;

  @media screen and (max-width: 1306px){
    --width-var: 144px;
  };
}