---
title: Использование переменных в CSS
slug: Web/CSS/Using_CSS_custom_properties
tags:
- CSS
- CSS переменные
- Web
- Руководства
translation_of: Web/CSS/Using_CSS_custom_properties
---
<div>{{SeeCompatTable}}</div>
<div> </div>
<p><strong>CSS переменные</strong> (<strong>пользовательские CSS-свойства</strong>) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. <span id="result_box" lang="ru"><span>Они устанавливаются с использованием custom property нотации </span></span>(<span class="short_text" id="result_box" lang="ru"><span>например.</span></span> <strong><code>--main-color: black;</code></strong>) и доступны через функцию <a href="/en-US/docs/Web/CSS/var">var()</a> (<span class="short_text" id="result_box" lang="ru"><span>например.</span></span> <code>color: <strong>var(--main-color)</strong>;</code>) .</p>
<p>Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись <code>--main-text-color</code> более понятна, чем <code>#00ff00</code>, особенно если этот же цвет используется и в другом контексте.</p>
<p>CSS переменные подчиняются каскаду и наследуют значения от своих родителей.</p>
<h2 id="Основное_использование">Основное использование</h2>
<p>Объявление переменной:</p>
<pre class="brush:css; highlight:[2] language-css">element {
--main-bg-color: brown;
}
</pre>
<p>Использование переменной:</p>
<pre class="brush:css; highlight:[2] language-css">element {
background-color: var(--main-bg-color);
}
</pre>
<div class="note">
<p><strong>Note:</strong> В более ранней спецификации префикс для переменных был <code>var-</code> , но позже был изменён на <code>--</code>. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})</p>
</div>
<h2 id="Первый_шаг_с_CSS_Переменными">Первый шаг с CSS Переменными</h2>
<p>Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:</p>
<div id="sample1">
<pre class="brush:css; highlight:[3,20,26,32]">.one {
color: white;
background-color: brown;
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: brown;
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: brown;
margin: 10px;
width: 100px;
}
.five {
background-color: brown;
}
</pre>
<p>Мы применим его к этому HTML:</p>
<pre class="brush:html"><div>
<div class="one"></div>
<div class="two">Text <span class="five">- more text</span></div>
<input class="three">
<textarea class="four">Lorem Ipsum</textarea>
</div>
</pre>
<p>что приводит нас к этому:</p>
<p>{{EmbedLiveSample("sample1",600,180)}}</p>
<p><br>
Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдоклассе :root, автор CSS может избежать ненужных повторений, используя эту переменную.</p>
</div>
<div id="sample2">
<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
</pre>
<div class="hidden">
<pre class="brush:html"><div>
<div class="one"></div>
<div class="two">Text <span class="five">- more text</span></div>
<input class="three">
<textarea class="four">Lorem Ipsum</textarea>
</div>
</pre>
</div>
<p>Это приводит к тому же результату, что и предыдущий пример, но позволяет <span class="short_text" id="result_box" lang="ru"><span class="alt-edited">объявить желаемое свойство только один раз</span></span>.</p>
<h2 id="Наследование_переменных_в_CSS_и_возвращаемые_значения">Наследование переменных в CSS и возвращаемые значения</h2>
<p>Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:</p>
<pre class="brush: html"><div class="one">
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
</div></pre>
</div>
<p>со следующим CSS:</p>
<pre class="brush: css">.two {
--test: 10px;
}
.three {
--test: 2em;
}
</pre>
<p>В результате <code>var(--test) будет:</code></p>
<ul>
<li>для элемента с классом <code>class="two"</code>: <code>10px</code></li>
<li>для элемента с классом <code>class="three"</code>: <code>2em</code></li>
<li>для элемента с классом <code>class="four"</code>: <code>10px</code> (унаследовано от родителя)</li>
<li>для элемента с классом <code>class="one"</code>: <em>недопустимое значение</em>, что является значением по умолчанию для любого пользовательского свойства.</li>
</ul>
<p>Используя <a href="/en-US/docs/Web/CSS/var">var()</a> вы можете объявить множество <strong>возвращаемых значений</strong> когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.</p>
<p>Первый аргумент функции это имя <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательского свойства</a>. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательское свойство</a> является не действительным. Например:</p>
<pre><code>.two {
color: var(--my-var, red); /* red если --my-var не определена */
}
.three {
background-color: var(--my-var, var(--my-background, pink)); /* pink если --my-var и --my-background не определены */
}
.three {
background-color: var(--my-var, --my-background, pink); /* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена */
}</code></pre>
<div class="note">
<p>В замещаемых значениях можно использовать запятые по аналогии с <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательскими свойствами</a>. Например, var(--foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)</p>
</div>
<div class="note">
<p>Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.</p>
</div>
<h2 id="Обоснованность_и_полезность">Обоснованность и полезность</h2>
<p>Понятие классической концепции CSS, связанность с каждым свойством, не очень удобно в плане пользовательских свойств. Когда значения пользовательских свойств обрабатываются, браузер не знает где они будут применяться, поэтому нужно учитывать почти все допустимые значения.</p>
<p>К сожалению, эти значения могут использоваться через функциональную запись <code>var()</code> , в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к невалидным выражениям CSS, что приводит к новой концепции <em>валидности во время исполнения.</em></p>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("css.properties.custom-property")}}</p>