В настоящее время я использую 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
в каждом запросе на медиа? Не проблема в этом простейшем примере, но в реальных проектах это может сэкономить много времени и скопировать/вставить.
EDIT: Не решение, а обходной путь для моего конкретного проекта:
- Установите размер шрифта на
<html>
на базовый размер шрифта -
myVar
LESS переменная определяется вrem
вместоpx
как производная от базового размера шрифта - Используйте
@media
запросы для настройки базового размера шрифта для разных носителей. - ДОПОЛНИТЕЛЬНО Используйте блок REM polyfill для браузеров, которые еще не поддерживают
rem
(http://caniuse.com/#search=rem). Это не будет работать в IE 8 и ниже, но не из-за отсутствия поддержкиrem
- не поддерживает медиа-запросы. Таким образом, 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 с более обширным примером, который смешивает различные элементы размера шрифта с разным измеренным блоком.
Легко и гибко для моих нужд. Надеюсь, это будет полезно для кого-то еще.