Cosss
@Cosss
Графический дизайнер

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

Могу ли я сделать в less вот так
@gap: 30px;
@media only screen and (max-width: 1440px)  {
    @gap: 40px;
}

Естественно, именно так не работает, но, может, я что-то не то делаю?
  • Вопрос задан
  • 3504 просмотра
Пригласить эксперта
Ответы на вопрос 3
В это статье habrahabr.ru/post/130089 используется, кажется, примерно то что вам нужно
Ответ написан
Комментировать
Ну у вас по вашей логике получается, что запись как-бы должна быть такой:
@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);
}
Ответ написан
Комментировать
@egrom92
Верстаю
С ответом скорее всего запоздал, но я думаю остальным будет полезно!

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

Вот таблица поддержки браузера от "Can I Use".
html {
  --width-var: 244px;

  @media screen and (max-width: 1306px){
    --width-var: 144px;
  };
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы