# О процессе разработки
Для подготовки CSS стилей был разработан фреймворк который базируется на Dart SASS (opens new window), а для его обработки, был создан SCSS плагин.
# Возможности
- концепция модульности и реализация компонентов
- стилизация проекта и наследование стилей проекта
- темизация, поддержка нескольких тем
- автоматическая инверсия тем
- автоматическая поддержка RTL
- postcss обработка ( Autoprefix, cleancss, rtl-css, ungic плагины)
- экспорт SASS сущностей в JSON формате, как напрямую в HTML плагин, так и в отдельный .json файл
- интеграция с плагином иконок
- генерация релиза с любым количеством компонентов и тем
- разделять конечные стили и выносить темы и инверсию тем в отдельные файлы
- интеграция с внешними SASS модулями и фреймворками, например с bootstrap
# Sass Dart Framework
Ungic SASS Фреймворк - это платформа для создания собственных CSS стилей, основанных на sass компонентах.
Не смотря на то, что данный фреймворк называется SASS фреймворком, процесс обработки и сборки .scss файлов происходит на уровне JS, а именно:
- порядок сборки .scss файлов,
- управление маршрутизацией включаемых модулей,
- пост-обработка
При генерации стилей, также генерируется подробная sass map карта.
# Принцип работы фреймворка
В данном разделе описывается основной принцип работы ungic scss фреймворка.
Для написания css стилей был выбрал Dart Sass (opens new window) препроцессор, который является новой реализацией SASS, но имеет больше возможностей и придерживается концепции модульного подхода.
Процесс разработки конечных css стилей выглядит следующим образом:
Имеется проект и независимые компоненты, компоненты наследуют стили проекта и имеют собственную конфигурацию, которая может быть переопределена из самого проекта.
Каждый компонент включает в себя необходимые для него модули, подробнее о sass модулях смотрите на официальном сайте sass (opens new window). Включение модулей также контролируется с помощью JS, что позволяет включать виртуальные системные модули ungic, которые находятся вне зоны видимости проекта, подробнее в разделе о модулях.
Процесс генерация конечных css файлов
В режиме разработки:
В режиме разработки, все sass компоненты генерируют собственный .css файл, который может быть включен в HTML документ с помощью un-pipe инструмента.
Обратите внимание!
CSS файлы сгенерированные в режиме разработки, непригодны для использования в production!
При генерации релиза:
При генерации релиза необходимо выбрать компонент или набор компонентов, указать тему по умолчанию и другие конфигурационный параметры. В зависимости от выбранных параметром, сгенерируется один или несколько конечных оптимизированных .css файлов пригодных для использования в production.
# Коротко о процессе компиляции
Процесс компиляции полностью зависит от указанных параметров. Компиляция может происходить в один этап, а может и в несколько, а затем результат обрабатывается с помощью postcss плагинов и генерируется в конечный .css файл(ы).
TIP
При генерации инверсии темы, а также, при генерации стилей дополнительных тем, sass компиляция выполняется в несколько этапов!