HelpSophie
@HelpSophie

Как правильно записать в LESS вложенные media?

@tablet-width: 660px;
@retina-dpi:  144dpi;
@retina-dppx: 1.5dppx;

@retina: (min-resolution: @retina-dpi), (min-resolution: @retina-dppx);


@media (min-width: @tablet-width) {
  .block {
    background: red;
  }

  @media (min-resolution: @retina-dpi), (min-resolution: @retina-dppx) {
  .block {
    background: green;
    }
  }
}


Вот так все работает.

Но хочу ввести переменную @retina и писать что-то типа:
@media @retina {}
Пробовала уже и так @{retina} и так ~"@{retina}" и в саму переменную ставить кавычки, тильды и скобки.
Но что-то никак мне.

Как правильно написать, чтобы на выходе получилось:

@media (min-width: 660px) {
  .block {
    background: red;
    }
}
@media (min-width: 660px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 660px) and (min-resolution: 144dpi), (min-width: 660px) and (min-resolution: 1.5dppx) {
  .block {
    background: green;
    }
}

-webkit автопефиксер дорисывывает
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы