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

<Meta title='@dxtmisha/ru/scripts/Classes/StylesToVar - Преобразователь CSS-переменных'/>

# Класс StylesToVar

Класс `StylesToVar` используется для преобразования свойств дизайна в переменные CSS. Он может обрабатывать отдельные переменные или обрабатывать все вложенные переменные внутри ветки.

## Ключевые возможности

- **Пакетная обработка переменных** — Может перебирать ветку и генерировать объявления CSS-переменных для всех под-свойств, помеченных как переменные.
- **Генерация отдельных переменных** — Также может использоваться для генерации одной переменной для текущего свойства.
- **Преобразование цвета в RGB** — Автоматически преобразует значения цветов в формат RGB (обернутый в `ui.toColorRbg`) для лучшей совместимости с управлением прозрачностью.
- **Поддержка прозрачности** — Генерирует дополнительные переменные `-opacity`, если свойство содержит данные о прозрачности.
- **Нормализация значений** — Обеспечивает правильное экранирование значений и по умолчанию устанавливает `unset`, если значение отсутствует.

## Инициализация

Инициализируйте преобразователь `StylesToVar` с помощью необходимой ветки свойств.

**Параметры:**
- `property: PropertyItemsItem` — текущая обрабатываемая ветвь дерева свойств.
- `space: string` — строка отступа.
- `content?: () => string[]` — обычно не используется для блоков переменных.
- `first?: boolean` — указывает, является ли элемент первым (необязательно).

```typescript
import { StylesToVar } from '@dxtmisha/scripts'

const converter = new StylesToVar(property, '  ')
const result = converter.make()
```

## Методы

### Управление

- `make(): string[]` — Основная точка входа. Организует генерацию одной или нескольких CSS-переменных на основе структуры свойства.
