20
Июн
2019

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

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

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

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

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

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

/* Определяем переменные CSS и область действия */
:root {
 --maincolor: black;
 --secondarycolor: red;
}
/* Используем переменные CSS */
body {
 background: var(--maincolor);
 color: white;
}
body p {
 background: var(--secondarycolor);
}

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

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

a {   
 color: var(--maincolor);  
 text-decoration-color: var(--secondarycolor); 
}

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

/* Определяем переменные CSS и область действия */
:root {
 --darkfont: green; 
 --darkborder: 5px dashed var(--darkfont);
}
/* Используем переменные CSS */
.container {
 color: var(--darkfont);
 border: var(--darkborder);
}

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

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

root {
 --darkborder: 5px solid black;
}
body {
 --darkborder: 1px solid darkred;
}
img{
 border: var(--darkborder); /* граница для img будет - 1px solid darkred */
}

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

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

:root {
 --myborder: 2px solid black;
}
ul {
 margin: 0;
 border-left: var(--myborder);
}
ul ul {
 margin-left: 30px;
}

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

:root {
 --myborder: 2px solid black;
}
ul {
 margin: 0;
 border-left: var(--myborder);
}
ul ul {
 --myborder: initial; /* reset --myborder variable */
 margin-left: 30px;
}

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

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

body {  
 --primary: #7F583F;
 --secondary: #F7EFD2; 
}
a {
 color: var(--primary);
 text-decoration-color: var(--secondary); 
}
@media screen and (min-width: 480px) {   
 body {    
  --primary:  #F7EFD2;   
  --secondary: #7F583F;  
 } 
}

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

background: var(--primarybg, white); 
/* Обычное значение в качестве резервного варианта */
font-size: var(--defaultsize, var(--fallbacksize, 36px)); 
/* var() в качестве резервного варианта */

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

background: white; 
/* значение background для браузеров, которые не поддерживают переменные CSS */
background: var(--primarybg, white);

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

Заключение

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

Автор: Nirazan Basnet

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

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

Share

Тебе может это понравится...