От автора: если коротко: мы используем переменные postcss-css для обработки стилей, чтобы можно было использовать пользовательские CSS-свойства в разработке, сохраняя кроссбраузерность. Похоже, что сейчас пользовательские CSS-свойства (или CSS переменные) просто везде. В сети полно постов, показывающих как, что и каким образом делать, но очень мало примеров повседневного использования. Если у вас нет четкого определения пользовательским свойствам, то на Smashing Magazine есть хорошая статья – пора использовать пользовательские CSS-свойства.
Я работаю в агентстве, где кроссбраузерность обязательное требование и включает в себя IE11 (к сожалению). Мы не можем использовать CSS-переменные в продакшене, но у них есть преимущества, позволяющие использовать их в разработке и постпроцессинге до оригинальных свойств.
У нас в gulp есть задача на переменные postcss-css, которая меняет все CSS-переменные в стилях на заданные значения. Почти как SCSS-переменные (в смысле того, как они обрабатываются), но эта задача позволяет писать меньше SCSS и по необходимости удалять обработку и разворачивать стили с пользовательскими свойствами.
Для всех примеров ниже я покажу CSS и то, что мы получаем на выходе после постобработки.
Разделители
Для меня большое преимущество в пользовательских свойствах заключается в том, что не нужно указывать новые разделители для всех брейкпоинтов каждого элемента.
CSS-код, который пишем мы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
:root { --gutter: 1rem; @media (min-width: 40em) { --gutter: 1.5rem; } @media (min-width: 70em) { --gutter: 2rem; } } div { padding: var(--gutter); } h2 { margin-bottom: var(--gutter); } |
Выходной CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
div { padding: 1rem; } h2 { margin-bottom: 1rem; } @media (min-width: 40em) { div { padding: 1.5rem; } h2 { margin-bottom: 1.5rem; } } @media (min-width: 70em) { div { padding: 2rem; } h2 { margin-bottom: 2rem; } } |
Как видите, первоначальный CSS короче, чище и проще, и результат получается таким же, как обычно.
Градиенты
На днях мне нужно было сменить направление градиента на определенных размерах экрана. Чтобы не переобъявлять целый градиент, я изменил направление через переменную.
CSS-код, который пишем мы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
div { --direction: to bottom; // Меняем направление градиента на мобильном устройстве background: linear-gradient( var(--direction), rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.1) 100% ); @include mq(tablet) { --direction: to right; } } |
Выходной CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
div { background: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.1) 100% ); } @media (min-width: 70em) { div { background: linear-gradient( to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.1) 100% ); } } |
Мне и другим разработчикам так проще понять, что меняется только направление. Так не нужно сравнивать два объявления градиентов.
Пользовательские CSS-свойства – замечательный способ упростить чтение CSS. Если вы уже используете PostCSS, можно быстро добавить плагин и использовать CSS-переменные без ущерба для поддержки браузера.
Источник: //www.mikestreety.co.uk/
Редакция: Команда webformyself.
