(ru) Add translate for "Web/CSS/var()" page (#4132)

Co-authored-by: Sasha Sushko <sushko@outlook.com>

1 files changed, 84 insertions, 0 deletions

diff --git a/files/ru/web/css/var()/index.md b/files/ru/web/css/var()/index.md
new file mode 100644
index 0000000000..a5ee137b10
--- /dev/null
+++ b/files/ru/web/css/var()/index.md
@@ -0,0 +1,84 @@
+---
+title: var()
+slug: Web/CSS/var()
+tags:
+  - CSS
+  - CSS Custom Properties
+  - CSS Function
+  - CSS Variables
+  - Experimental
+  - Function
+  - Reference
+  - Variables
+  - var
+  - var()
+browser-compat: css.properties.custom-property.var
+---
+{{CSSRef}}
+
+[Функция](/ru/docs/Web/CSS/CSS_Functions) [CSS](/ru/docs/Web/CSS) **`var()`** используется для вставки значения [кастомного свойства](/ru/docs/Web/CSS/--*) (также известного как "CSS-переменная") в другое свойство.
+
+{{EmbedInteractiveExample("pages/css/var.html")}}
+
+Функцию `var()` нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств.
+
+## Синтаксис
+
+Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение.
+
+{{csssyntax}}
+
+> **Примечание:** синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, `var(--foo, red, blue)` задаёт резервное значение `red, blue`; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением.
+
+### Значения
+
+- `<custom-property-name>`
+  - : Имя кастомного свойства, начинающиеся с двух дефисов. Кастомные свойства предназначены исключительно для разработчиков и пользователей; CSS никак не влияет на них.
+- `<declaration-value>`
+  - : Резервное значение кастомного свойства. Используется в случае, если кастомное свойство не определено или не может быть использовано в текущем контексте. Резервное значение может содержать любой символ, кроме некоторых спецсимволов, вроде символа новой строки, непарных закрывающих скобок (т.е. `)`, `]`, или `}`), точку с запятой или восклицательный знак.
+
+## Примеры
+
+### Использование кастомного свойства, определенного внутри :root
+
+```css
+:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+```
+
+### Кастомные свойства с резервным значением, когда свойство не было установлено
+
+```css
+/* Резервное значение */
+/* Стили для элементов компонента: */
+.component .header {
+  color: var(--header-color, blue); /* header-color не существует, поэтому используется blue */
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* Стили для самого компонента: */
+.component {
+  --text-color: #080;
+}
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("env()","env(…)")}} – доступные только для чтения переменные среды, контролируемые браузером
+- [Использование CSS-переменных](/ru/docs/Web/CSS/Using_CSS_custom_properties)