import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/# UI/properties/types/Переменные (var)'/>

# Переменные (var)

Система генерации свойств предлагает два механизма работы с пользовательскими CSS-переменными (Custom Properties): явное объявление узла как переменной с помощью системного типа `var` и комбинированную генерацию свойств и переменных с помощью флага `_var: true`.

## Декларативное объявление (Тип `var`)

Тип `var` (или его алиас `$`) предписывает компилятору отказаться от создания обычного CSS-свойства. Узел компилируется исключительно как CSS-переменная и становится доступен в области видимости (scope) текущего компонента.

> **Каскадное наследование:** Тип `var` обладает свойством структурного нисхождения. Если родительский узел объявлен как `var` (или через алиас `$`), все его вложенные дочерние узлы автоматически унаследуют этот же тип. Вам не нужно дублировать объявление `var` для каждого потомка.

**Входная конфигурация (`properties.json`):**
```json
{
  "card": {
    "padding": {
      "_type": "var",
      "value": "16px"
    }
  }
}
```
*(Использование алиаса `$padding: "16px"` приведет к абсолютно идентичному результату).*

**Ожидаемый результат генерации (SCSS):** 
```scss
.card {
  --card-padding: 16px;
}
```

## Комбинированная генерация (Флаг `_var`)

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

Для этого используется конфигурационный флаг `_var: true`. Он позволяет узлу сохранить свой изначальный тип (по умолчанию `property`), но заставляет компилятор выполнить сразу два действия:
1. Сгенерировать CSS-переменную со значением свойства.
2. Присвоить самому CSS-свойству значение через функцию `var()`.

**Входная конфигурация (`properties.json`):**
```json
{
  "button": {
    "background": {
      "_var": true,
      "value": "blue"
    }
  }
}
```

**Ожидаемый результат компиляции (SCSS/CSS):**
```scss
.button {
  --button-background: blue;
  background: var(--button-background);
}
```

Таким образом, использование мульти-флага `_var: true` полностью устраняет необходимость писать дублирующийся код рутинной привязки переменных к свойствам.
