Що вибрати -Компас або Bourbon Zencoder
June 09, 2014
Іноді у Twitter, Reddit або StackOverflow виникає таке питання.
Майже кожен, хто працював із Sass хоча б раз задавав його собі - що вибрати, Compass чи Bourbon?
У цій статті я висловлю свою думку щодо використання Compass або Bourbon. Але перш за все потрібно зробити невеликий екскурс в історію.
Історія Compass та Bourbon
Compass заявляє про себе як про CSS фреймворк під Sass. Він підтримується Chris Eppstein, одним із двох розробників Sass. Compass - це наполовину Ruby і наполовину Sass, він є повним набором міксинів і інструмент під Sass. Докладніше про нього пізніше.
З іншого боку, Bourbon створений на Sass та для Sass чудовою командою розробників Thoughtbot. Якщо вірити домашній сторінці проекту, Bourbon - це скоріше бібліотека, ніж фреймворк; проста та легковажна бібліотека міксинів під Sass.
У результаті ми маємо з одного боку Ruby/Sass фреймворк, а з іншого боку маємо бібліотеку Sass. Цілком різні речі, чи не так?
Міксини Compass та Bourbon
Якщо запитати користувача Compass/Bourbon, з якою метою він використовує цей інструмент, високі шанси почути однозначну відповідь: для крос-браузерної сумісності. Можливо, він відповість не зовсім так, але відповідь матиме приблизно такий самий зміст.
Compass і Bourbon є величезною колекцією міксинів для створення CSS3-ефектів; завдяки цим міксинам відпадає необхідність детально вникати в браузерні префікси або CSS-хитрощі (CSS hacks).
Нижче наведено приклад міксину в обох бібліотеках Compass і Bourbon. Як бачимо, синтаксис та результат роботи однаковий:
Той факт, що Compass та Bourbon маютьоднаковий синтаксис для більшості міксинів робить перехід у використанні з Compass на Bourbon і з Bourbon на Compass дуже легким.
Існує одна важлива різниця між цими інструментами: починаючи з Compass 1.0 (вийшов разом із Sass 3.3), Compass отримує інформацію із сайту Can I Use. Це означає, що майже завжди даний фреймворк отримує найсвіжішу інформацію щодо браузерних префіксів.
У той час як бібліотека Bourbon повністю залежить від оновлень, які випускають розробники цієї бібліотеки.
Якщо ви використовуєте Autoprefixer для вирішення питань браузерних префіксів, то все вищесказане не стосується вас.
Друкарня в Compass та Bourbon
Обидва – Compass та Bourbon – надають набір готових міксинів, змінних та функцій для роботи з друкаркою. Крім цього, Compass має у своєму складі повноцінний модуль для створення вертикального ритму, включаючи набір змінних та пару міксинів:
У Compass також є можливість підтримки одиниць виміру з відкатом до , якщо ви використовуєте як значення змінної замість .
Є ще ціла купа різних налаштувань, тому якщо ви є шанувальником друкарні, Compass зможе відповісти всім вашим вимогам.
Бібліотека Bourbon має менш вражаючий набір можливостей для роботи з друкаркою; Однак вона також має все для швидкого старту розробки. У Bourbon є не тільки можливість перетворення пікселів в , але також такі чудові функції, як і .
Незважаючи на те, що ці функції не мають прямого відношення до друкарні, вони добре підходять для створення вертикального ритму в документі.
CSS-сітки в Compass та Bourbon
Хіба можна назвати фреймворк повноцінним, якщо він не має системи сіток(grid system), вірно?
Фреймворк Compass має у складі систему Blueprint Grid, яка, наскільки знаю, немає нічого спільного зі старим фреймворком під назвою Blueprint. Варто сказати, що система Blueprint фреймворку Compass є неповноцінною.
Серед усіх людей, які використовують Compass та з якими мені доводилося спілкуватися, лише один пробував працювати з Blueprint. Ця система настільки недосконала, що Chris Eppstein вирішив прибрати її з Compass, починаючи з версії 1.0.0 (що відповідає Sass 3.3).
У той же час бібліотека Bourbon надає пару міксинів, за допомогою яких можна створити власну сітку. Це функції (не варто плутати з моделлю Flexbox) та .
Крім цього, у команди Thoughtbot є своя власна, окрема від Bourbon система сіток під назвою Neat, яка позиціонується як легковажний семантичний фреймворк під Sass і Bourbon.
Таким чином, бібліотека Bourbon не має у своєму складі системи сіток (grid system), але можна вільно скористатися для цього фреймворком Neat.
Якщо зробити короткий підсумок щодо системи сіток, то можна сказати наступне. Якщо необхідна система сіток із тісною інтеграцією Sass-фреймворку, то моя думка – це використовувати зв'язок Bourbon + Neat. Обидва проекти були створені одними й тими самими людьми; в обох проектах була закладена одна і та сама основна ідея. Це можна порівняти як два шматочки одного пазла.
Однією цікавою річчю Sass-фреймворків є так звані helpers. Helpers - це встановлені CSS-правила, які можна використовувати в таблицях стилів так, щоб скоротити час розробки проекту.
Наприклад, Compass має набір helpers для float-clearing (включаючи кілька способів, як це зробити) та кількаCSS-хаків для старих версій браузера Internet Explorer; скидання стилів (кілька варіантів); кілька способів заміщення тексту зображенням та багато іншого.
У Bourbon такі helpers називаються add-ons, але вони виконують тугіше роботу; щоправда, у Bourbon їх трохи менше, ніж у Compass. Варто сказати, що команда Thoughtbot включила до складу проекту Bitters велику кількість helpers. Як вже було сказано вище, Bitters є стороннім проектом, який має чудову інтеграцію з Bourbon і служить для цілей створення друкарні в проекті.
Спрайти Compass та Bourbon
Запитайте користувача Compass, чому він з місяця на місяць і рік у рік використовує цю бібліотеку; клянуся, що у відповідь почуємо щось про систему створення спрайтів. Це та річ, яку Compass справді виконує добре. Завдяки тому, що Compass написано мовою Ruby, він може виконувати деякі дуже цікаві речі з файловою системою. Однією з таких фішок є здатність створювати спрайти із колекції зображень, розміщених в одній папці. Чудово, чи не так?
Крім автомагічного способу генерації спрайтів, Compass надає пару цікавих функцій для доступу до файлу зображень прямо з таблиці стилів, на кшталт , і навіть перетворення файлу зображення в Base64:
Так як Bourbon побудований тільки на Sass, він не має можливості доступу до файлової системи і ця бібліотека не може виконати таких речей, які може Compass. Тому, якщо ви шукаєте спосіб динамічного створення спрайтів і не хочете перейматися такими менеджерами завдань, як Grunt, Gulp або Ant, то вибір для вас очевидний.
І так що ж отримуємо в результаті - Compass або Bourbon?
Якщо запитати мене про це, то я відповім: жодної з них. Довгий час я бувкористувач бібліотеки Compass, поки не відмовився від його застосування.
На сьогоднішній день я віддаю перевагу додавати в створюваний Sass-проект свої власні інструменти, ніж використовувати весь фреймворк повністю. Але це стосується мене особисто. Я думаю, що в більшості випадків було б краще використовувати весь фреймворк, принаймні у разі великих проектів.
Тому я вважаю, що є лише два критерії, які мають вирішувати для вас питання вибору. І головним серед цих двох критеріїв є наступний (який ви повинні задати самому собі): чи потрібні мені можливості обробки зображень (розміри зображень, спрайти і так далі)?
Бібліотека Compass чудово підходить для цих цілей, але вона виконує своє завдання повільно, надто повільно. Тому, якщо вас не влаштовує такий факт, подивіться у бік Bourbon. Ця бібліотека чудово швидка хоча б тому, що складається з одних Sass-міксинів, що виконують завдання Sass усередині таблиць стилів Sass.
Якщо ви вирішили використати бібліотеку Bourbon, то я б рекомендував вам також задіяти інші проекти команди Thoughtbot: Neat як система сіток (grid system), Bitters для друкарні та ще не згаданий до цього моменту Refills (який є повною альтернативою фреймворку Bootstrap) з повним набором компонентів, готовий до використання у створюваному проекті.
Примітка перекладача: у цій статті подано порівняльний огляд двох фреймворків - Compass та Bourbon. Особисто для мене було б цікавіше переглянути практичні приклади використання бібліотеки Bourbon.
## Git Stash> Я прямо закохався в команду stash від git, хоча до самого git належу без. фанатизму. Команда _git stash_ призначена для. … Continue reading