Less, можно ли присваивать @переменным новые значения через @media query?

Question

[Владимир]

Могу ли я сделать в less вот так

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

Естественно, именно так не работает, но, может, я что-то не то делаю?

Answer 1

[Илья Шабанов]

В это статье habrahabr.ru/post/130089 используется, кажется, примерно то что вам нужно

Answer 2

[Павел Мышкин]

Ну у вас по вашей логике получается, что запись как-бы должна быть такой:

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

Она естественно не будет работать.
Поэтому вы сначала должны сделать миксин, чтобы его использовать, например:

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

Если написать без параметра, то подставятся первые значения:

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

Либо уже либо делать что-то в духе:

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

Answer 3

[Roman Egliens]

С ответом скорее всего запоздал, но я думаю остальным будет полезно!

Для тех, кто может позволить поддерживать только относительно современные браузеры (Chrome 49+, FF 31+, no IE), вы можете использовать переменные css.

Вот таблица поддержки браузера от "Can I Use".

html {
  --width-var: 244px;

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