Переменные CSS: преимущества пользовательских свойств

Переменные CSS: преимущества пользовательских свойств

От автора: Переменные CSS или «Пользовательские свойства CSS». Они позволяют работать с переменными непосредственно в CSS. Они очень полезны для уменьшения повторения в CSS, а также для создания мощных эффектов во время выполнения, таких как переключение тем. Они соответствуют принципу DRY — Don’t Repeat Yourself.

С помощью переменных CSS вы можете локализовать значения и упростить начальную разработку, итеративное тестирование и последующее обслуживание — все за один раз. Они также официально являются частью спецификации CSS. Итак, давайте рассмотрим их.

Основное объявление

Любое — цвет, размер, положение и т. д. — свойство CSS может быть сохранено в переменной CSS. Их имена имеют префикс —, и вы объявляете их, добавляя переменные к элементу, как вы добавляете другие его стили:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Здесь я определил две переменные CSS, которые задаю значения цвета внутри селектора :root. Переменные определены внутри и имеют соответствующие селекторы. Обратите внимание , что переменные CSS чувствительны к регистру в отличие от других свойств CSS, так —maincolor и —Maincolor рассматриваются, как две различные переменные.

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

Еще одна интересная особенность переменных CSS — мы можем даже установить значение одной переменной для другой переменной CSS, полностью или частично:

Область действия и каскад

Переменные CSS действуют как обычные свойства стиля; переменная доступна в любом месте вниз по каскаду. Например, эти переменные могут использоваться чем угодно на всей странице:

Здесь мы определили одну и ту же переменную CSS —darkborder дважды внутри двух разных селекторов. Из-за каскадных правил та, что находится внутри селектора body, имеет более высокую специфичность и применяется при для элемента img.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Но мы также можем отключить свойство наследования, установив для него специальное значение «initial» внутри нужного селектора. Из приведенного выше примера:

Преимущества в медиа-запросах

Мы можем использовать этот тип шаблона для медиа-запросов, где все изменения происходят в браузере, и переменные знают об условиях, при которых они используются.

Установка резервных значений, когда переменная CSS не определена

Чтобы предоставить резервные значения для браузеров, в которых нет поддержки этой функции, вы можете сделать что-то вроде следующего:

Теперь все будут счастливы! Поддержка браузерами. Как видите, здесь довольно много зеленого.

Заключение

Я надеюсь, что вы будете рады изучить преимущества CSS-переменных. Поэтому я предлагаю вам попробовать их в своем проекте и наслаждаться!

Автор: Nirazan Basnet

Источник: https://medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий