Игорь Надеин 8363cbd541 feat: Complete CSS to SCSS migration (100%)

- Migrated all 28 CSS components to SCSS architecture
- Deleted 29 source CSS files (kept only compiled app.css & bootstrap-custom.css)
- Created 30 SCSS component modules in scss/components/
- Cleaned 24 templates from duplicate CSS links
- Updated main.scss with new imports (layout-spacing, spacing-utils, rightbar-calendar)
- Filled empty _navbar.scss with content
- Refactored css/ folder: removed obsolete files, updated README.md
- Created comprehensive documentation (migration complete, quick reference, reports)

Migration Statistics:
- Components migrated: 28 (~4,768 lines SCSS)
- CSS files deleted: 29
- Templates cleaned: 24
- app.css size: 95 KB (compiled from SCSS)
- bootstrap-custom.css: 301 KB
- Total: 396 KB

Phase 6 Complete: 100% SCSS architecture achieved ✅

2026-01-15 13:48:11 +03:00

4.7 KiB

Raw Blame History

SCSS Quick Start Guide

🎯 Для разработчиков

Работа со стилями

После изменения SCSS файлов:

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

# Пересобрать стили
npm run build:app

# ИЛИ запустить watch режим (автокомпиляция)
npm run watch:app

Watch режим - рекомендуется при активной разработке:

npm run dev  # Запустит автокомпиляцию Bootstrap + App

Где находятся стили?

SCSS исходники (редактируем здесь):

backend/static/scss/
├── main.scss              # Главный файл (импорты)
├── abstracts/
│   ├── _variables.scss    # Цвета, размеры, токены
│   └── _mixins.scss       # Переиспользуемые миксины
├── layout/
│   └── _base-app.scss     # Основной layout приложения
└── components/
    ├── _buttons.scss      # Кнопки
    ├── _cards.scss        # Карточки
    └── ...                # Другие компоненты

Скомпилированный CSS (не редактируем вручную):

backend/static/css/
├── app.css               # ← Этот файл загружается на страницах
└── bootstrap-custom.css  # ← Bootstrap с кастомизацией

Как добавить новые стили?

Вариант 1: Добавить в существующий компонент

Найди нужный SCSS файл в scss/components/ и добавь стили:

// scss/components/_buttons.scss

.btn-custom {
  padding: var(--space-2);
  background: var(--bs-primary);
  
  &:hover {
    background: var(--bs-primary-dark);
  }
}

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

Создай файл scss/components/_my-component.scss
Добавь импорт в scss/main.scss:
```
@import 'components/my-component';
```
Пересобери: npm run build:app

Используй переменные

Вместо жестко заданных значений:

❌ .my-element {
  padding: 16px;
  color: #0d6efd;
}

Используй переменные:

✅ .my-element {
  padding: var(--space-2);
  color: var(--bs-primary);
}

Доступные переменные (см. scss/abstracts/_variables.scss):

Цвета: --bs-primary, --bs-secondary, --bs-danger, etc.
Отступы: --space-1 (8px), --space-2 (16px), --space-3 (24px)
Радиусы: --radius-sm, --radius-md, --radius-lg
Тени: --shadow-sm, --shadow-md, --shadow-lg

Темная тема

Всегда добавляй стили для темной темы:

.my-card {
  background: #ffffff;
  color: #000000;
  
  [data-bs-theme="dark"] & {
    background: #2b3035;
    color: #dee2e6;
  }
}

Вложенность селекторов

SCSS позволяет вкладывать селекторы:

.card {
  padding: 1rem;
  
  .card-header {
    font-weight: 600;
    
    &:hover {
      background: var(--bs-tertiary-bg);
    }
  }
  
  &.highlighted {
    border-color: var(--bs-primary);
  }
}

🚨 Частые проблемы

Стили не применились?

Проверь компиляцию:
```
npm run build:app
```
Очисти кеш браузера: Ctrl+Shift+R (Chrome/Firefox)
Проверь консоль на ошибки компиляции

Файл app.css не обновляется?

Убедись что watch процесс запущен:

npm run watch:app

Предупреждения при компиляции?

Deprecation warnings про @import - это нормально, не критично. Стили работают корректно.

📚 Полезные ресурсы

Sass официальная документация
Bootstrap 5.3 документация
Полный отчет о миграции: backend/docs/reports/CSS_TO_SCSS_MIGRATION_COMPLETE.md

🔥 Quick Reference

# Пересобрать всё
npm run build:css

# Только app.css
npm run build:app

# Только Bootstrap
npm run build:bootstrap

# Watch режим
npm run dev

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

Вопросы? Смотри полную документацию в backend/docs/

4.7 KiB Raw Blame History Unescape Escape