@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 автопефиксер дорисывывает