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

Question

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

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

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

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

С помощью этого анализа я не решаюсь дать Compass попробовать.

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

Answer 1

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

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

Answer 2

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

Answer 3

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

Другим важным ресурсом является Compass plugins page.

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

Answer 4

Идеальная цель - разделение стиля и содержания: это не всегда возможно на 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 и + пирог clearfix (кросс-браузер клиринговых методов)
• + всплывать гарантирует, что вы не забывайте дисплей: встроенные перед ним для IE ... (если пришло время сбросить старые IE, это одно единственное изменение.)
• + replace-text скрывает текст и позиционирует фон для замены изображения.
• + парения-ссылка добавляет: парить подчеркнуть правило стиля

базовой линии Вы можете проверить это на новом docs site for Compass.

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