Как реорганизовать существующий проект на использование Compass?

Question

У меня есть существующий проект Django, который использует обычный CSS. Таблицы стилей разбиты по функциональности, поэтому есть nav.css, course.css, default.css, reset.css и т. Д. Все они импортируются в main.css, на который ссылаются страницы html.

Я хотел бы использовать Compass в этом проекте, чтобы сделать таблицы стилей более управляемыми, а также упростить для пользователя интерфейс.

Перед тем, как проверить Compass, я заглянул в Sass и создал файлы .scss для всех моих таблиц стилей.

Теперь я понимаю, что лучше использовать Compass, чем просто Sass, потому что я получу все стили по умолчанию, которые прилагаются к нему. Однако я немного смущен тем, как начать процесс рефакторинга.

Каким будет правильный процесс для рефакторинга (в шагах ребенка) существующего проекта, который уже имеет свои стили, чтобы заставить его использовать Compass?

Answer 1

Большая часть работы по рефакторингу такая же, как и с компасом, и вы увидите преимущества, которые предлагает Sass раньше, чем у Compass.

Создатель компаса Крис Эпштейн сделал рецензию о том, как он ходил около refactoring digg's CSS. Подводя итог:

1. Извлечь частичные части. У вас все в порядке с этим, так как у вас уже есть отдельные таблицы стилей для разных функций. Идите дальше и вытащите независимые наборы правил, чтобы упростить управление и разрушить проект рефакторинга на более мелкие шаги.

2. Анализ стилей. Ищите повторяющиеся шаблоны и отношения наследования в ваших новых партитурах. Везде, где у вас есть дублирование селектора, может быть хорошим местом для начала следующего шага.

3. Извлечь базовые классы. Здесь вы можете сушить свой CSS с помощью @extend. Вытащите дублированные объявления в базовый класс и продолжите.

4. Применение гнездования.Nesting - отличная функция Sass, которая упрощает чтение стилей.

5. Извлечь смесь. Если вы обнаружили общие шаблоны стилизации на шаге 2, настало время извлечь их в mixins.

Теперь вы действительно можете начать использовать Compass и его шаблоны многократного использования. Знакомство с Compass documentation поможет определить, какие из миксинов применимы к вашему проекту.