Переменные в CSS

Стилизация с помощью переменных

Последнее обновление: 18.11.2018

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

Стоит отметить, что хотя часто используется термин "переменные" (css variables), официально они называются custom properties (кастомные или настраиваемые свойства).

Определение переменных CSS должно начинаться с префикса --, например, --my-color. Они могут быть определены для любого элемента. Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Variables в CSS3</title>
        <style>
            div {
			  --text-color: #ff4757;
			  --text-size: 20px;
			  height: 40px;
			  font-family: Verdana;
			}

			#div1 {
				font-size: var(--text-size);
			}

			#div2 {
				color: var(--text-color);
			}

			#p1 {
				color: var(--text-color);
				font-size: var(--text-size);
			}
        </style>
    </head>
    <body>
        <div id="div1">Первый блок.</div>
		<div id="div2">Второй блок.</div>
		<div><p id="p1">Третий блок.</p></div>
    </body>
</html>

Здесь в коде CSS для элемента div определены две переменныx: --text-color и --text-size

--text-color: #ff4757;
--text-size: 20px;

С помощью выражения var() мы можем ссылаться на эти переменные в любой части кода CSS:

#p1 {
	color: var(--text-color);
	font-size: var(--text-size);
}

В итоге первый блок получит высоту шрифта из --text-size, второй блок получит цвет шрифта из --text-color, а третий блок получит оба этих компонента.

Custom properties and variables in CSS

Если нам потребуется изменить цвет текста, достаточно будет изменить значение переменной.

Подобные переменные можно определить для любого элемента. При этом они наследуется дочерними элементами. Так, в примере выше мы видим, что вложенный элемент параграфа получает стили от родительского div.

Но если бы параграф находился бы вне блока div:

<div id="div1">Первый блок.</div>
<div id="div2">Второй блок.</div>
<p id="p1">Третий блок.</p>

Тогда бы значения из переменных к нему бы не применялись:

Переменные в CSS

Если же необходимо, чтобы переменные могли бы использоваться глобально для всех элементов, тогда их определяют для элемента :root

:root{
	--text-color: #ff4757;
	--text-size: 20px;
}

Резервные значения

При определения переменных могут содержать какие-нибудь ошибки, например, переменная не определена (вообще не определена или в ее названии опечатка). В этом случае мы можем указать при применении переменной резервные значения, которые бдут применяться в случае, если значение переменной некорректно.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Variables в CSS3</title>
        <style>
			:root{
			  --tex-color: #ff4757;
			  --text-size: 20px;
			  --reserved-color: #5352ed;
			}
            div {
			  height: 35px;
			  font-family: Verdana;
			}

			#div1 {
				color: var(--text-color, var(--reserved-color));
			}

			#div2 {
				color: var(--text-color, var(--reserved-color, red));
			}

			#div3 {
				color: var(--text-color, #2ed573);
			}
        </style>
    </head>
    <body>
        <div id="div1">Первый блок.</div>
		<div id="div2">Второй блок.</div>
		<div id="div3">Третий блок.</div>
    </body>
</html>

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

color: var(--text-color, var(--reserved-color));

Для второй переменной можно также определить резервное значение, если она некорректна:

color: var(--text-color, var(--reserved-color, red));

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850