Corp/docs/guides/SCSS_QUICK_REFERENCE.md

SCSS Quick Reference - EUSRR Project

🚀 Быстрый старт

Компиляция SCSS

# Перейти в директорию со статикой
cd backend/static

# Собрать app.css (один раз)
npm run build:app

# Watch режим (автоматическая пересборка при изменении)
npm run dev

Добавление нового компонента

1. Создать файл scss/components/_my-component.scss
2. Добавить импорт в scss/main.scss:

   @import 'components/my-component';
   

3. Пересобрать CSS: npm run build:app

📁 Структура

scss/
├── main.scss                    ← ENTRY POINT
├── abstracts/
│   ├── _variables.scss          ← SCSS переменные ($var)
│   ├── _css-variables.scss      ← CSS переменные (--var)
│   └── _mixins.scss             ← Миксины
├── layout/
│   └── _base-app.scss           ← Grid layout
└── components/
    └── _*.scss                  ← 30 компонентов

🎨 Использование переменных

CSS Custom Properties (runtime)

.my-component {
  padding: var(--space-2);        // 8px
  gap: var(--layout-gap);         // 16px
  border-radius: var(--card-radius);
}

Доступные CSS переменные

Spacing (8px grid):

--space-1: 4px    // минимальный отступ
--space-2: 8px    // стандартный
--space-3: 12px   // между секциями
--space-4: 16px   // между блоками
--space-5: 24px   // большой разделитель

Layout:

--navbar-h: 60px
--sidebar-w: 200px
--rightbar-w: 350px
--layout-gap: 16px
--layout-padding-y: 24px

Components:

--card-padding: 16px
--card-padding-sm: 8px
--card-padding-lg: 24px
--card-radius: 14px
--feed-radius: 18px

📝 Код стайл

Вложенность

.card {
  padding: var(--card-padding);
  
  .card-header {
    background: var(--bs-tertiary-bg);
  }
  
  .card-body {
    padding: var(--space-3);
  }
}

Родительский селектор (&)

.button {
  background: var(--bs-primary);
  
  &:hover {
    opacity: 0.9;
  }
  
  &--large {
    padding: var(--space-4);
  }
}

Media queries

.component {
  display: block;
  
  @media (min-width: 768px) {
    display: flex;
  }
}

⚙️ Кастомизация Bootstrap

Файл: scss/custom-bootstrap.scss

// Переопределить переменные Bootstrap
$primary: #0d6efd;
$spacer: 0.5rem;  // 8px

// Spacers (8px grid)
$spacers: (
  0: 0,
  1: 0.25rem,  // 4px
  2: 0.5rem,   // 8px
  3: 0.75rem,  // 12px
  4: 1rem,     // 16px
  5: 1.5rem,   // 24px
);

🛠️ Полезные команды

# Собрать app.css
npm run build:app

# Собрать bootstrap-custom.css
npm run build:bootstrap

# Watch режим (оба файла)
npm run dev

# Проверить размер
ls -lh css/app.css

🎯 Частые задачи

Добавить spacing между элементами

.container {
  display: flex;
  gap: var(--space-2);  // 8px между элементами
}

Создать адаптивный компонент

.responsive-card {
  padding: var(--space-2);  // 8px на мобильных
  
  @media (min-width: 768px) {
    padding: var(--space-3);  // 12px на планшетах
  }
  
  @media (min-width: 992px) {
    padding: var(--space-4);  // 16px на десктопе
  }
}

Использовать цвета Bootstrap

.element {
  color: var(--bs-primary);
  background: var(--bs-secondary);
  border-color: var(--bs-border-color);
}

📦 Что включено в app.css

• ✅ Все 30 SCSS компонентов
• ✅ CSS Custom Properties
• ✅ Layout системы (grid, chat)
• ✅ Utility классы spacing
• ✅ Responsive стили

Размер: 95 KB compressed

⚠️ Важно

1. Не создавать новые CSS файлы - только SCSS в scss/ папке
2. Всегда добавлять импорт в main.scss для новых компонентов
3. Использовать CSS переменные вместо хардкода значений
4. Пересобирать после изменений: npm run build:app

📚 Документация

• Полная документация: docs/completed/CSS_TO_SCSS_MIGRATION_100_PERCENT_COMPLETE.md
• Phase 6 отчет: docs/reports/CSS_TO_SCSS_PHASE6_FINAL_CLEANUP.md

---

Обновлено: 15 января 2026
Версия: 1.0