Введение в переменные в CSS🔥

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

Что такое: root?

: root это CSS Pseudo-Class который считается эквивалентным В HTML ссылаясь на весь документ. Мы объявляем переменные внутри : root и можно использовать везде. Переменные упоминаются двойными дефисами подпись - Моин-цвет: HotPink

:root {
  --main-color: hotpink;
}

Ссылка на переменную

Как только переменная установлена в : root , мы можем легко получить доступ к нему в любом селекторе, используя var Функция, как показано ниже:

:root {
   --main-color: orange;
}

.some-other-class {
   background-color: var(--main-color);
}

Объявление переменной внутри : root Проще означает, что мы можем получить доступ к переменной в пределах любого селектора CSS, как : root считается максимальным большинством родителей для всех селекторов, как Для всех других тегов в HTML. Точно так же мы можем определить переменную внутри любых других селекторов:

HTML

    
First child text





    
Second child text

CSS.

.first-parent {
  --main-color: orange;
}
.first-parent__child {
  background-color: var(--main-color);
}
.second-parent__child {
  background-color: var(--main-color);  /* this won't work */
}

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

Это это на сегодня 🎉. Хотел бы услышать ваши мысли и поделиться мне, как часто вы принимаете силу переменных CSS в ваших проектах. Оставаться настроек 👋.

Оригинал: “https://dev.to/ahmedgmurtaza/enjoy-reusability-using-variables-in-css-347c”