Понятие CSS переменных

Понятие CSS переменных

От автора: CSS переменные или пользовательские свойства CSS позволяют работать с переменными прямо в CSS. Они отлично помогают в сокращении повторяющегося кода CSS, а также это мощный инструмент таких эффектов, как переключение темы. У CSS переменных есть функции полифилов. Они работают по принципу DRY – не повторяйся. С помощью CSS переменных вы можете локализовывать значения и упрощать первичную разработку, итерационное тестирование и в последствии обслуживание. Они официально включены в CSS спецификацию. Перейдем к деталям.

Стандартное объявление

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

Пример:

/* Define CSS variables and scope */
:root {
 --maincolor: black;
 --secondarycolor: red;
}
/* Use CSS Variables */
body {
 background: var(--maincolor);
 color: white;
}
body p {
 background: var(--secondarycolor);
}

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Пример:

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

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

Пример:

/* Define CSS variables and scope */
:root {
 --darkfont: green; 
 --darkborder: 5px dashed var(--darkfont);
}
/* Use CSS Variables */
.container {
 color: var(--darkfont);
 border: var(--darkborder);
}

Область видимости и каскадирование

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

root {
 --darkborder: 5px solid black;
}
body {
 --darkborder: 1px solid darkred;
}
img{
 border: var(--darkborder); /* img border will be 1px solid darkred */
}

Мы определили одну и ту же переменную –darkborder дважды в разных селекторах. По правилам каскадирования переменная внутри селектора BODY имеет более высокую специфичность, поэтому к img применится значение второй переменной.

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

Например:

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
: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;
}

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

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

Пример:

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); 
/* Normal value as fallback value */
font-size: var(--defaultsize, var(--fallbacksize, 36px)); 
/* var() as fallback value */

В качестве фолбека значений для браузеров без поддержки можно использовать:

background: white; 
/* background value for browsers that don't support CSS variables */
background: var(--primarybg, white);

И все счастливы!

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

Понятие CSS переменных

Много зеленого, можно потестировать.

Заключение

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

Автор: Nirazan Basnet

Источник: https://blog.yipl.com.np/

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree