направляющие + компас: преимущества по сравнению с использованием haml + копируют непосредственно
У меня есть некоторый опыт с помощью haml (+sass) на проектах направляющих. Я недавно начал использовать их с blueprintcss - единственная вещь, которую я сделал был преобразование blueprint.css в файл дерзости и начало кодировать оттуда. У меня даже есть генератор направляющих, который включает все это по умолчанию.
Кажется, что Компас делает то, что я делаю, и другие вещи. Я пытаюсь понять то, что те другие вещи - но документация/учебные руководства не была очень четкой.
Это мои заключения:
- Компас идет со встроенной дерзостью mixins, которые реализуют общие идиомы CSS, такие как ссылки со значками или горизонтальные списки. Мое решение не обеспечивает ничего как этот. (1 точка для Компаса).
- Компас имеет несколько параметров командной строки: можно создать проект направляющих, но можно также "установить" его на существующем проекте направляющих. Генератор направляющих мог быть персонализирован, чтобы сделать то же самое, я предполагаю. (Связь).
- Компас имеет два режима работы с проектом: "основное" и "семантическое" использование. Я не соглашаюсь с различиями между теми. С моим генератором направляющих у меня только есть один режим, но это кажется достаточно. (Связь)
- По-видимому, Компас готов использовать другие платформы помимо проекта (например, YUI). Я не мог найти много документации об этом, и мне не интересно на ней так или иначе - проект хорошо для меня (Связь).
- Кривая обучения компаса кажется немного жесткой, и документация кажется редкой. Изучение могло быть немного трудным. С другой стороны, я знаю входы и выходы своей собственной системы и могу использовать ее сразу же. (1 точка для моей системы).
С этим анализом я не решаюсь давать Компасу попытку.
Мой анализ корректен? Я, упускаю какую-либо ключевую суть, или я оценил какую-либо из этих точек неправильно?
4 ответа
Compass выглядел отличным решением и для меня, но попробовав его в проекте, я не увидел больших преимуществ его использования для себя. Как и вы, я прекрасно обхожусь blueprint, и я не видел необходимости добавлять еще один слой поверх haml/sass.
В итоге я удалил компас из этого проекта и просто использую sass-версию CSS-файлов blueprint, и иду от этого. Все пользовательские/дополнительные стили я храню в отдельном sass-файле и все. Нет необходимости в compass или чем-то подобном, если вы просто хотите все упростить.
«Семантический режим» относится к возможности использовать больше семантических имен классов, чем те, которые поставляются фреймворками css: .article vs .grid_1. что я лично считаю большим плюсом.
Я не уверен, появились ли эти ресурсы только недавно, но видели ли вы Compass CSS3 helpers и General utilities - (на мой взгляд, оба хорошо документированы) - они действительно значительно ускорили создание моего интерфейса.
Еще один замечательный ресурс - это страница плагинов Compass .
Лично мне нравится копировать эти служебные файлы Sass из rubygem и вручную включать их в файлы Sass моего проекта, поскольку ссылки на Sass, хранящиеся вне проекта, кажутся довольно странными.
Идеальная цель - разделение стиля и содержания: это не всегда возможно на 100%, но это можно сделать достаточно хорошо, используя семантическую разметку. Blueprint и другие CSS-фреймворки в этом совершенно не справляются.
Первоначальная идея Compass заключалась в том, чтобы избежать загрязнения HTML визуальной разметкой, которую генерирует Blueprint: если вы пишете class = "column-4" в своей разметке, то вы также можете указать style = "width: 160px" вместо этого. Семантически это то же самое значение и такое же количество повторений, которые необходимо поддерживать.
Compass превращает класс Blueprint, например .column-4 , в миксин, который вы можете применить к значимому селектору:
#sidebar
+column(4)
Таким образом, вам нужно сохранить его только в таблице стилей, а не в количество шаблонов и файлов HTML.
Компас ориентирован на проект. Он выполнит компиляцию всего вашего дерева таблиц стилей, даже автоматически при сохранении, когда вы запустите compass watch .
Компас предоставляет несколько очень полезных функций, например:
image_url - настраиваемая функция, которая может обрабатывать относительные или абсолютные пути или даже настраивать чередующиеся хосты ресурсов, если вам нужно.
Модуль CSS3 заботится обо всех специфичных для браузера правилах стиля для закругленных углов, теней и т. Д.
Общие утилиты предоставляют помощников для того, что вы делаете постоянно, но с меньшим количеством повторений (особенно для кроссбраузерности). Вот некоторые из основных, которые я часто использую:
- + clearfix и + pie-clearfix (кроссбраузерные методы очистки)
- + float гарантирует, что вы не забудете display: inline перед ним для IE ... (если приходит время отказаться от старых IE, это одно единственное изменение.)
- + replace-text скрывает текст и размещает фон для замены изображения.
- + hover-link добавляет правило подчеркивания: hover к базовому стилю ссылки
Вы можете проверить это на новом сайте документации для Compass .
Кроме того, Compass предоставляет средства для ряда других стилевых фреймворков в дополнение к встроенному Blueprint. Обязательно ознакомьтесь, например, с Susy , который является фреймворком верстки Sass, а не просто портом CSS. Он специализируется на гибких и плавных решетках.