Рельсы + компас: преимущества против использования haml + blueprint напрямую

У меня есть опыт использования haml (+ sass) в проектах rails. Я недавно начал использовать их с blueprintcss - единственное, что я сделал, это преобразовать файл blueprint.css в sass файл и начать кодирование оттуда. У меня даже есть rails generator, который включает все это по умолчанию.

Кажется, что Compass делает то, что я делаю, и другие вещи. Я пытаюсь понять, что это за другие вещи, но документация/учебники были не очень ясными.

Вот мои выводы:

  • Компас поставляется с встроенными sass mixins, которые реализуют общие идиомы CSS, такие как ссылки с значками или горизонтальными списками. Мое решение не дает ничего подобного. (1 балл для компаса).
  • Компас имеет несколько опций командной строки : вы можете создать проект рельсов, но вы также можете "установить" его на существующий проект рельсов. Полагаю, генератор рельсов может быть персонализирован, чтобы сделать то же самое. (Рулевой).
  • Компас имеет два режима работы с планом: "основное" и "семантическое" использование. Я не понимаю о различиях между ними. С генератором рельсов у меня есть только один режим, но это кажется достаточно. (Рулевой)
  • По-видимому, Compass готов использовать другие фреймворки, помимо чертежа (например, YUI). Я не мог найти много документации об этом, и мне все равно это не интересно - план подходит для меня (Tie).
  • Кривая обучения Compass выглядит немного жесткой, и документация кажется скудной. Обучение может быть немного сложным. С другой стороны, я знаю все входы и выходы своей собственной системы и могу сразу ее использовать. (1 балл для моей системы).

При таком анализе я не решаюсь попробовать Compass.

Правильно ли мой анализ? Я пропущу какие-либо ключевые моменты, или я неправильно оценил любой из этих пунктов?

ОТВЕТЫ

Ответ 1

Компас выглядел как отличное решение для меня, но, попробовав его в проекте, я действительно не видел большого преимущества использования его для меня. Как и вы, я в порядке с планом, и я не видел необходимости добавлять еще один слой поверх haml/sass.

В конце концов я удалил компас из этого проекта и просто пошел с sass-версией синтаксических CSS файлов и оттуда. Я сохраняю любые пользовательские/дополнительные стили в отдельном файле sass и что он. Нет необходимости в компасе или что-то в этом роде, если вы просто хотите сохранить его простым.

Ответ 2

Идеальной целью является разделение стиля и содержания: это не всегда возможно на 100%, но это можно сделать достаточно хорошо, используя семантическую разметку. Blueprint и другие рамки CSS полностью терпят неудачу при этом.

Первоначальная идея Compass заключалась в том, чтобы избежать загрязнения HTML с визуальной разметкой, которую генерирует Blueprint: если вы пишете class="column-4" в своей разметке, тогда вместо этого вы можете поставить style="width:160px". Семантически это то же значение, и то же количество повторений для поддержания.

Компас превращает класс Blueprint, такой как .column-4 в mixin, который вы можете применить к содержательному селектору:

#sidebar
  +column(4)

Таким образом, вам нужно только сохранить его в таблице стилей, а не по нескольким шаблонам и файлам HTML.

Компас осведомлен о проекте. Он будет обрабатывать компиляцию всего дерева таблиц стилей, даже автоматически при сохранении при запуске compass watch.

Есть несколько очень полезных функций, предоставляемых компасом, например:

image_url - конфигурируемая функция, которая может обрабатывать относительные или абсолютные пути или даже настроить вращающиеся хосты ресурсов, если вам нужно.

Модуль CSS3 выполняет все правила стиля браузера для закругленных углов, теней и т.д.

Общие утилиты предоставляют помощники для всего, что вы делаете все время, но с меньшим количеством повторений (особенно для проблем с браузером). Вот некоторые из основных, которые я использую много:

  • + clearfix и + pie-clearfix (методы очистки в разных браузерах)
  • + float гарантирует, что вы не забудете отображение: inline перед ним для IE... (если придет время отказаться от старых IE, это одно единственное изменение.)
  • + replace-text скрывает текст и позиционирует фон замены изображений.
  • + hover-link добавляет правило подчеркивания: hover к стилю базовой ссылки

Вы можете проверить их на новом сайте docs для Compass.

Затем Compass предоставляет средства для ряда других фреймворков стиля в дополнение к встроенному Blueprint. Например, посмотрите Susy, который является основанной на Sass компоновкой макета, а не только портом CSS. Он специализируется на гибких и жидких сетках.

Ответ 3

"Семантический режим" относится к возможности использовать больше семантических имен классов, чем те, которые используются в css frameworks:.article vs .grid_1. который я лично считаю большим +.

Ответ 4

Я не уверен, появились ли эти ресурсы только недавно, но вы видели помощники Compass CSS3 и Общие утилиты - (оба хорошо задокументированы на мой взгляд) - они действительно ускорили мой интерфейс.

Другим важным ресурсом является Страница плагинов Compass.

Лично мне нравится копировать эти служебные файлы Sass из rubygem и вручную включать их в мои файлы проекта Sass, поскольку это выглядит довольно странно, ссылаясь на Sass, который хранится вне проекта.