Изучите переменные CSS за 5 минут

внешний интерфейс CSS

Оригинальная ссылкаLearn CSS Variables in 5 minutes

Пользовательские свойства CSS (т. е. свойства переменных) — отличный инструмент для разработчиков интерфейсов.Он вводит мощные свойства переменных в CSS, тем самым уменьшая дублирование кода и улучшая читабельность и гибкость кода.

Кроме того, в отличие от некоторых препроцессоров CSS, переменные CSS на самом деле являются частью модели DOM, что является огромным преимуществом для разработки.

Зачем изучать переменные CSS?

Есть много причин, по которым переменные используются в CSS, главная из которых заключается в том, что они уменьшают дублирование кода стилей.

The old way

Возьмите этот код в качестве примера, как мы делаем ниже#ffeeadСоздание переменной с цветами было бы намного лучше, чем механическое повторение:

The new way

Это не только делает ваш код более читабельным, но и дает вам больше гибкости для внесения изменений, которые вы хотите внести в будущем.

Хотя эта функция была реализована несколько лет назад в SASS и LESS, переменные CSS могут многое предложить:

  1. Ему не нужно выполнять какие-либо шаги транспиляции, поскольку он изначально поддерживается браузером. Таким образом, вам не нужно писать такой код без каких-либо настроек, как это делается с SASS и LESS.
  2. Это часть DOM, которая обеспечивает нам большое удобство, о чем я объясню позже в статье.

Итак, приступим!

Объявите свою первую переменную CSS

Прежде чем объявить переменную, вы должны сначала определить, где находится область действия переменной.Если вы хотите, чтобы она действовала глобально, просто:rootЕго можно определить в псевдоклассе. Он будет соответствовать корневому элементу документа (обычно<html>Этикетка).

Поскольку переменные наследуются, все дерево структуры HTML может использовать эту переменную, поскольку все элементы DOM являются<html>потомки узла.

:root {
  --main-color: #ff6f69;
}

Вы можете объявить переменную так же, как любое свойство CSS. Но разница в том, что переменные должны начинаться с двух дефисов.

Чтобы получить значение этой переменной, вам нужно использоватьvar()функция, передавая имя переменной в качестве параметра.

#title {
  color: var(--main-color);
}

ваш титул будет присвоен#ff6f69с цвет.

Title

объявить локальную переменную

Вы также можете создавать локальные переменные, доступ к которым может получить только объявленный элемент и его дочерние элементы. Обычно объявляется, когда вы хотите использовать эту переменную только в определенных частях страницы.

Например, предположим, что у вас есть окно предупреждения на вашей странице, и вы хотите назначить ему особый цвет, который не применяется к остальной части страницы. Тогда в этом случае следует избегать создания глобальных переменных, а разумнее использовать локальные переменные.

.alert {
  --alert-color: #ff6f69;
}

Теперь эту переменную можно использовать в своих дочерних элементах:

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

Если вы попытаетесь использовать переменную в другом месте на страницеalert-color, недействителен, браузер проигнорирует эту строку кода CSS.

Адаптивные макеты стали проще благодаря переменным CSS

Одним из больших преимуществ переменных CSS является то, что они имеют доступ к DOM, чего не могут сделать переменные LESS или SASS, поскольку они скомпилированы в обычный CSS.

Это означает, что вы можете изменить значение переменной в зависимости от ширины экрана:

:root {
  --main-font-size: 16px;
}
media all and (max-width: 600px) {
  :root {
    --main-font-size: 12px;
  }
}

С помощью всего четырех простых строк кода вы можете изменить основной размер шрифта вашего приложения на маленьких экранах.

Как JavaScript обращается к переменным CSS

Еще одним большим преимуществом объединения с 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')

main-colorСвойства изменяют общий вид вашей страницы, позволяя пользователям легко настраивать цвет темы вашего веб-сайта.

change color

Поддержка браузера

В настоящее время 77% глобального трафика веб-сайтов поддерживают переменные CSS, а в США этот показатель уже близок к 90%. Мы уже используем переменные CSS на Scrimba.com, потому что наши клиенты в основном используют современные браузеры.

browser support

Выше приведен обзор переменных CSS, надеюсь, вы сможете что-то для себя почерпнуть.

Для получения дополнительной информации, пожалуйста, посетитеХотите изучить переменные CSS? Вот мой бесплатный курс из 8 частей!

Категории