---
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">&lt;div&gt;
    &lt;div class="one"&gt;&lt;/div&gt;
    &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
    &lt;input class="three"&gt;
    &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
&lt;/div&gt;
</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 style="display: none;">
<pre class="brush:html">&lt;div&gt;
    &lt;div class="one"&gt;&lt;/div&gt;
    &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
    &lt;input class="three"&gt;
    &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
&lt;/div&gt;
</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">&lt;div class="one"&gt;
  &lt;div class="two"&gt;
    &lt;div class="three"&gt;&lt;/div&gt;
    &lt;div class="four"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</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>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Особенность</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    33.0<br>
    {{CompatNo}} 34.0<sup>[2]</sup><br>
    {{CompatChrome(49.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("29")}}<sup>[3]</sup><br>
    {{CompatGeckoDesktop("31")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera(36.0)}}</td>
   <td>9.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Особенность</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("29")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>9.1</td>
   <td>{{CompatChrome(49.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Chrome initially implemented this feature using a different syntax, which required to prefix custom property names with <code>-webkit-var-</code> to define them. They could then be used unprefixed within a <code>-webkit-var()</code> function. Additionally, the implementation was hidden behind the <em>Enable experimental WebKit features</em> flag under <code>chrome://flags</code>, later renamed to <em>Enable experimental Web Platform features</em>.</p>

<p>[2] В Chrome 34.0 убрали эту функцию из-за проблем с производительностью.</p>

<p>[3] This feature is implemented behind the preference <code>layout.css.variables.enabled</code>, defaulting to <code>false</code> and using the old <code>var-<var>variablename</var></code> syntax in Gecko 29. Starting from Gecko 31 the preference is enabled by default and the new <code>--<var>variablename</var></code> syntax is used.</p>