Наконец-то пришло время, CSS собирается стать динамичным с введением переменных CSS. Хотя новая технология является экспериментальной, она очень интересна для меня, поскольку это может означать меньшее количество компиляций в моем текущем рабочем процессе CSS на основе Sass.
В этой статье рассказывается об удивительной новой технологии, а также дается несколько примеров использования переменных CSS на практике.
Переменные CSS по определению
Согласно MDN, «переменные CSS - это сущности, определенные авторами CSS, которые содержат определенные значения, которые могут быть повторно использованы в документе. Они задаются с помощью нотации (например, --main-color: black;) и доступны с помощью функции var() (например, color: var(--main-color;). "
Если вы знакомы с переменными в ваших документах на основе LESS и Sass, эта концепция не так уж и нова, но прелесть этой новой технологии заключается в том, что вам не нужно использовать какой-то компилятор (Grunt, Gulp, Codekit и т. Д. …), Чтобы ваш CSS работал правильно.
Зачем вообще переменные?
Традиционный CSS написан очень часто. Часто вам нужно использовать серию селекторов для просмотра вашей веб-страницы и применения стилей к выбранному вами элементу. Старый способ выглядит так:
.content { background-brown: brown; color: white; font-size: 1rem; }.sidebar { background-color: brown; color: white; font-size: 1rem; }.hero { background-color: blue; color: white; font-size: 2rem; }
Здесь я повторил несколько стилей. В этом коде нет ничего плохого. Просто это очень однообразно. Таким образом, вместо того, чтобы набирать что-то снова и снова, переменные здесь, чтобы помочь вам определить конкретные параметры, которые вы можете использовать во всей вашей таблице стилей. Это упрощает ввод и упрощает обновление позже.
Преимущества огромны, поскольку ваша таблица стилей становится длиннее для более крупных веб-сайтов и приложений. Переменные позволяют легко вносить изменения во множество различных определений стилей и быть более согласованными с определениями ваших свойств (например, вместо 20 разных версий синего цвета вы просто повторно используете то же, что и определено в переменной).
Основы
Объявление переменной:
.header { --header-bg-color: blue; }Используя переменную:
.header { background-color: var(--header-bg-color); }Применяем это на практике в реальном мире
Допустим, вы создаете веб-сайт с разными стилями заголовков для разных типов страниц. В приведенном ниже примере я определил несколько базовых HTML, чтобы проиллюстрировать это.
<!-- Home Page--> <html> <body class="home"> <header class="header"></header> ... </body> </html><!-- Random Page with Body class of .page--> <html> <body class="page page-about"> <header class="header"></header> ... </body> </html>
HTML предназначен для двух страниц. Одна является домашней страницей, а другая - базовой повторяющейся страницей на веб-сайте.
В нашей таблице стилей мы используем переменные CSS следующим образом:
:root { --header-home-bg-color: blue; --header-pages-bg-color: white; }.home .header { background-color: var(--header-home-bg-color); }.page .header { background-color: var(--header-pages-bg-color); }
Вы можете заметить псевдокласс :root на вершине. Вместо того, чтобы объявлять переменную внутри элемента, вы можете сделать это для всей таблицы стилей таким образом.
Каскадный эффект
При определении и использовании переменных для традиционного CSS применяются те же правила каскадирования.
:root { --color: black; } div { --color: green; } .notice { --color:red; }<p>This paragraph will be black because of the root element.</p><div>This div was set to green but only it was</div><div class="notice"> This div is set to red directly.<p>This paragraph is also set to red</p> </div>
Использование каскадного характера означает, что вы можете пойти дальше создания настраиваемых свойств для адаптивного дизайна.
:root { --main-margin: 10px; } div { margin: var(--main-margin); }@media(min-width: 767px) { :root { --main-margin: 5px; } }
Современные препроцессоры CSS делают приведенный выше код невозможным. То, что показано выше, доступно только с использованием переменных CSS. Как видите, здесь есть большой потенциал.
Объяснение функции var ()
Для получения определенного вами настраиваемого свойства требуется использование функции var(). Он принимает два параметра, один из которых представляет собой массив из нескольких подпараметров.
var(--variable-name [, <declaration-value> ]? )К настоящему времени я надеюсь, что свойство --_ 26_ имеет смысл, поскольку оно представляет собой саму переменную. <declaration-value> - это запасное значение, используемое, когда переменная недействительна. Эти значения могут быть, например, списком названий шрифтов, разделенных запятыми. Другой пример демонстрирует сокращенную серию определений заполнения: var(--containerpadding, 10px 15px 20px 30px). Обратите внимание, что эти сокращенные значения не разделяются запятыми.
Вот пример со шрифтами:
:root { --font-stack: "Open Sans"; }body { font-family: var(--font-stack, "Helvetica", "Arial"); }
И еще один с сокращенными свойствами:
:root { --base-pad: 10px 20px 30px; }.article { padding: var(--base-pad, 10px 10px 10px); }
Интеграция с JavaScript
Получить значение настраиваемого свойства можно с помощью метода getPropertyValue(), или вы можете установить свойства напрямую, как показано ниже.
<style> /* CSS */ :root { --brand-primary: blue; --brand-secondary: green; }.logo { color: var(--primary-color); } </style><!--HTML--> <div class="header"> <a class="logo">My Brand</a> </div><!--JS--> <script>const logoColor = document.querySelector('logo').style.setProperty('--brand-primary', 'var(--brand-secondary)');</script>
Поддержка браузера
Это все еще экспериментальная технология, поэтому я бы не советовал использовать ее в производственной среде, но вы можете проверить обновления статуса здесь или здесь.
Chrome 49, Firefox 42, Safari 9.1 и iOS Safari 9.3 поддерживают некоторые настраиваемые свойства.
Теперь, когда мы изучили, что такое переменные CSS, я надеюсь, вы немного повеселитесь с ними. Я сам пришел из Sass или Less, и я обнаружил, что эту технологию довольно быстро освоить, хотя есть некоторые новые функции, которые вы обычно не получаете из коробки с Sass или Less. В частности, следует разумно использовать эффекты наследования и каскадирования.
Если CSS-переменные вас интересуют, ознакомьтесь с прошлой статьей Расширенные селекторы CSS, о которых вы никогда не знали. Удачного взлома!
Первоначально опубликовано на сайте web-crunch.com 18 декабря 2016 г.
