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

Question

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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