Содержание статьи
Специальные свойства CSS (также известные как переменные) являются большим преимуществом для интерфейсных разработчиков. Это привносит мощность переменных в CSS, что приводит к меньшему повторению, лучшей читабельности и большей гибкости.
Кроме того, в отличие от переменных из препроцессоров CSS, переменные CSS действительно являются частью DOM, которая имеет много преимуществ. Поэтому они, в сущности, похожи на переменные SASS и LESS на стероидах. В этой статье я предлагаю вам ускоренный курс этой новой технологии.
Я также создал бесплатный интерактивный курс из 8 частей из сменных CSS, поэтому просмотрите его, если хотите стать экспертом по этой теме.
Хотите изучить переменные CSS? Вот мой бесплатный курс из 8 частей!
Зачем изучать переменные CSS?
Существует множество причин для использования переменных в CSS. Одним из самых убедительных является то, что он уменьшает количество повторов в таблице стилей.
В приведенном выше примере гораздо лучше создать переменную для #ffeead цвет, чем повторение, как мы делаем здесь:
Это не только облегчит чтение вашего кода, но и придаст вам больше гибкости, если вы хотите изменить этот цвет.
Теперь это действительно возможно с помощью переменных SASS и LESS в течение многих лет. Однако у переменных CSS есть несколько больших преимуществ.
- Для работы они не нуждаются в транспиляции, поскольку являются родными для браузера. Поэтому вам не нужны настройки, чтобы начать работу, как это происходит с SASS и LESS.
- Они живут в DOM, открывающем массу преимуществ, о которых я расскажу в этой статье и на своем будущем курсе.
А теперь начнём изучать переменные CSS!
Объявление вашей первой переменной CSS
Чтобы объявить переменную, вам сначала нужно решить, в какой области она должна жить. Если вы хотите, чтобы она была доступна глобально, просто определите ее на :root псевдокласс. Он соответствует корневому элементу в дереве документа (обычно это <html> тег).
Поскольку переменные наследуются, это сделает вашу переменную доступной для всей программы, поскольку все ваши элементы DOM являются потомками <html> тег.
:root {
--main-color: #ff6f69;
}
Как видите, вы объявляете переменную так же, как и любое свойство CSS. Однако переменная должна начинаться с двух тире.
Чтобы получить доступ к переменной, нужно использовать var() и передайте имя переменной в качестве параметра.
#title {
color: var(--main-color);
}
И это придаст вашему титулу #f6f69 цвет:
Объявление локальной переменной
Вы также можете создать локальные переменные, которые будут доступны только элементу, в котором они объявлены, и для его детей. Это имеет смысл делать, если вы знаете, что переменная будет использоваться только в определенной части (или частях) программы.
Например, у вас может быть окно уведомлений с особым цветом, который не используется в других местах программы. В таком случае может быть смысл избегать размещения его в глобальной области:
.alert {
--alert-color: #ff6f69;
}
Эту переменную теперь могут использовать ее дети:
.alert p {
color: var(--alert-color);
border: 1px solid var(--alert-color);
}
Если вы пробовали использовать alert-color переменная в другом месте вашего приложения, например, на панели навигации, это просто не будет работать. Браузер просто проигнорирует эту строку CSS.
Более простая реакция с переменными
Большим преимуществом переменных CSS является то, что они имеют доступ к DOM. Это не касается LESS или SASS, поскольку их переменные скомпилированы в обычный CSS.
На практике это означает, что вы можете, например, изменить переменные на основе ширины экрана:
:root {
--main-font-size: 16px;
}
media all and (max-width: 600px) {
:root {
--main-font-size: 12px;
}
}
С помощью этих простых четырех строк кода вы обновили основной размер шрифта во всей программе при просмотре на маленьких экранах. Достаточно элегантно, да?
Как получить доступ к переменным с помощью JavaScript
Еще одно преимущество жизни в DOM заключается в том, что вы можете получить доступ к переменным с помощью JavaScript и даже обновить их, например, на основе взаимодействия пользователя. Это идеально, если вы хотите дать пользователям возможность изменять ваш сайт (например, изменять размер шрифта).
Давайте продолжим пример с начала этой статьи. Захват переменной CSS в JavaScript занимает три строки кода.
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor);
\--> '#ffeead'
Чтобы обновить переменную CSS, просто вызовите setProperty метод для элемента, в котором объявлены переменные, и передать имя переменной как первый параметр, а новое значение как второй.
root.style.setProperty('--main-color', '#88d8b0')
Этот основной цвет может полностью изменить облик вашего приложения, поэтому он идеально подходит для того, чтобы позволить пользователям устанавливать тему вашего сайта.
Обновляя переменную, можно изменить цвет навигационной панели, текста и элементов.
Поддержка браузера
В настоящее время 77 процентов глобального трафика веб-сайтов поддерживает переменные CSS, причем почти 90 процентов в США. Мы уже некоторое время используем переменные CSS на Scrimba.com, поскольку наша аудитория достаточно подкована в технике и использует современные браузеры.
Ладно, это было все. Надеюсь, вы чему-то научились!
Если вы хотите изучить это должным образом, обязательно просмотрите мой бесплатный курс по переменным CSS на Scrimba.
Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый легкий способ научиться кодировать. Если вы хотите научиться создавать современные веб-сайты на профессиональном уровне, посетите наш курс адаптивного веб-дизайна.
