В настоящее время я использую LESS в качестве основного препроцессора CSS. У меня есть (и я уверен, что многие люди имеют эту потребность), чтобы определить переменные в@media запрос как:

@media screen and (max-width: 479px) {
    myVar: 10px;
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    myVar: 20px;
}
@media screen and (min-width: 768px) {
    myVar: 30px;
}

.myElement {
    padding: @myVar;
}

Это нене работает в LESS из-за компиляции (@myVar определяется в рамках каждого конкретного@media только, но не глобально). Даже если я определю@myVar глобально перед медиа-запросами, он не обновляется в соответствии с медиа-запросами и.myElement получает это начальное значение, несмотря ни на что.

Итак, вопрос в том, возможно ли достичь этого в любом другом препроцессоре CSS, или мы обречены переопределить.myElement в каждом медиа-запросе? Не проблема в этом простейшем примере, но в реальных проектах это может сэкономить много времени и копировать / вставить.

РЕДАКТИРОВАТЬ: Не решение, аобходной путь для моего конкретного проекта:

Установить размер шрифта на на базовый размер шрифтаmyVar Меньшая переменная определяется вrem вместоpx как производная от базового размера шрифтаиспользование@media запросы для настройки базового размера шрифта для разных носителей.НЕОБЯЗАТЕЛЬНЫЙ использованиеREM блок полифилл для браузеров, которые непока не поддерживаю (remhttp://caniuse.com/#search=rem). Это не будет работать в IE 8 и ниже, но не из-за отсутствия поддержкиrem - это неt поддерживает медиа-запросы, Так что IE8 и ниже в любом случае получают полноразмерную таблицу стилей без медиазапросов.

Фрагмент кода:

@myVar: .77rem; // roughly 10px, 20px and 30px respectively

html { font-size: 13px }
@media screen and (min-width: 480px) and (max-width: 767px) {
    html { font-size: 26px }
}
@media screen and (min-width: 768px) {
    html { font-size: 39px }
}

.myElement {
    padding: @myVar;
}

ВотJSBin с более обширным примером, который смешивает различные элементы размера шрифта с различными по размеру блоками.

Легко и гибко для моих нужд. Надеюсь, будет полезно для кого-то еще.