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

<Meta title='@dxtmisha/ru/scripts/Classes/PropertiesScss - Генерация SCSS'/>

# Класс PropertiesScss

Класс `PropertiesScss` отвечает за преобразование токенов и свойств дизайн-системы в структурированный SCSS-код. Полученный код используется для интеграции переменных дизайна в стили библиотеки, обеспечивая синхронизацию между JSON-определениями и Sass-переменными.

## Ключевые особенности

- **Автоматическая кодогенерация** — создание полной SCSS-структуры для подключения в стили.
- **Интеграция с миксинами** — генерирует вызовы специальных миксинов (`setDesignsDesigns`, `setDesignsRoot` и др.) для автоматической настройки.
- **Поддержка медиа-запросов** — преобразует размеры устройств в SCSS-карту.
- **Обработка палитры** — генерирует списки используемых цветов и уровней насыщенности.
- **Умное форматирование** — корректно обрабатывает типы значений (цвета, размеры, ссылки) для соответствия синтаксису SCSS.

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

Для инициализации генератора SCSS передайте экземпляр `PropertiesItems` в конструктор.

**Параметры:**
- `items: PropertiesItems` — объект управления всеми элементами свойств.

```typescript
import { PropertiesItems, PropertiesScss } from '@dxtmisha/scripts'

const manager = new PropertiesItems(tokenData)
const generator = new PropertiesScss(manager)
```

## Методы

### `get`
Возвращает полную отформатированную строку SCSS, готовую к записи в файл. Эта строка включает в себя импорт основных переменных стилей и последовательные вызовы миксинов для регистрации дизайнов, корневых свойств, медиа-запросов, классов и палитры.

**Возвращает:** `string` — полный текст SCSS файла.

```typescript
const scssContent = generator.get();
// Результат: "@use \"@dxtmisha/styles\" as variables; \n @include variables.setDesignsDesigns(...)"
```

### `getProperties`
Генерирует специализированную структуру карты SCSS для всех свойств, определенных в системе. Этот метод фокусируется на общих токенах (переменных), которые должны быть доступны в глобальной области видимости CSS/SCSS.

**Возвращает:** `string` — фрагмент SCSS с вызовом миксина `setDesignsProperties`.

```typescript
const propertyMap = generator.getProperties();
```

## Операции

### Процесс генерации SCSS

`PropertiesScss` выполняет многоэтапную трансформацию данных:
1. **Сбор дизайнов**: Идентифицирует все активные дизайны и формирует список для миксина `setDesignsDesigns`.
2. **Анализ категорий**: Распределяет свойства по категориям (root, class, theme) для генерации соответствующих блоков.
3. **Разрешение палитры**: Использует `PropertiesPalette` для получения списка реально используемых цветов и шагов насыщенности.
4. **Синтаксический анализ значений**: Метод `getValueItem` проверяет каждое значение на соответствие типам SCSS (строки оборачиваются в кавычки, HEX-коды и размеры с единицами измерения остаются без кавычек).
5. **Сборка структуры**: Формирует вложенные карты (maps) SCSS, соблюдая правильные отступы и разделители для обеспечения валидности Sass-кода.

## Примеры

### Полный цикл генерации
```typescript
import { PropertiesItems, PropertiesScss } from '@dxtmisha/scripts'

const items = new PropertiesItems(data)
const scss = new PropertiesScss(items)

// Получаем готовый код для записи в variables.scss
const fileData = scss.get()
```
