SASS Compass

fursaso

SASS+Compass. Коротко про головне. Встановлення, налаштування, переваги.

Як це все вже в курсі того, що для упрошення та інкапсуляції шаблонів верски все частіше використовуються фрейворки. У них зазвичай використовується одна з мов розмітки, таких як XML, JSON або Jade. Що дозволяє розбивати структуру сторінки на незалежні один від одного блоки та перевикористовувати їх на інших сторінках. Дана методологія була розроблена в Яндекс та отримала свою назву БЕМ (Блок Елемент Модифікатор). До них можна віднести BEM-tools, збірки на основі Gulp та Grunt.

Але сьогодні мова піде не про фреймворки HTML, які так чи інакше спрощують його генерацію. У цій статті ми розглянемо CSS фреймворк, який за своєю сутністю робить те саме, що було описано вище, але тільки з CSS.

Отже, представляю Вашій увазі стек із SASS та Compass. Постараюся докладно розглянути чим примітний SASS і як його можна компілювати в Compass.

Переваги SASS перед CSS.

SASS — це метамова на основі CSS, призначена для збільшення рівня абстракції CSS коду та спрощення файлів каскадних таблиць стилів. І отже має величезний ряд переваг перед чистим CSS.

Константи.

Мабуть, на цьому я перестану перераховувати переваги SASS над CSS, щоб не втомлювати Вас великою кількістю тексту. Тим більше, що всі інші фішки та особливості можна переглянути в офіційній документації до SASS.

Переваги SASS над LESS та Stylus.

Згоден, прочитавши порівняльний аналіз SASS з CSS, Ви могли замислитися, а навіщо створювати велосипед і вивчати новий синтаксис, коли вже багато хто на повний зріст використовують препроцесорну мову LESS і Stylus. Це питання я постараюся висвітлити нижче, але для підтримки інтересу скажу, що сенс все ж таки є, і дуже суттєвий.

А почнемо ми мабуть з того, що розглянемо, яким чином відбувається генерація CSS стилів. Для генерації із SASS було розроблено open-source CSS Framework під назвою Compass. Написаний він був на Ruby, проте Вам не знатиметься дана мова для роботи з нею. Compass передбачає два варіанти роботи зі стилями: через командний рядок та через спеціальну оболонку. На жаль, оболонка є платним програмним продуктом, але на мій погляд 10$ не є перевагою в наші дні при професійному підході. Хоча, якщо цей факт все ж таки Вас зупинить, то нічого страшного, в роботі через командний рядок нічого складного немає. Вам потрібно лише вивчити 2-3 команди.

Також існує ще один програмний продукт для роботи з SASS - це CodeKit, але його в рамках цієї статті мирозглядати нічого очікувати, т.к. він є повністю комерційним і буде коштувати Вам 29 $.

Для створення CSS з LESS або Stylus готових рішень не існує. І справа навіть не в тому, що ніхто не намагався це виправити, а в тому, що ця мова не є настільки ж сильною і самодостатньою як SASS.

Останнім часом все більше і більше замовників відмовляються від підтримки старих браузерів і хочуть бачити на своєму сайті всі принади, які надає CSS3. Але тут не все так гладко як хотілося б, адже досі деякі CSS3 сво-ва браузери підтримують лише через вендорні префікси. Але тут є вихід при використанні препроцессорних мов. Як правило, у таких випадках у LESS і Stylus використовуються Mixins (міксини/домішки), які дійсно сильно спрощують нам життя. У SASS є приблизно те саме, але відмінною особливістю його є те, що база з цих так званих домішок доповнюється і оновлюється самими розробниками, що погодьтеся зовсім не погано. Від кінцевого користувача потрібно лише підключити їх ( @import "compass/css3" ).

Ще одна дуже корисна і необхідна річ – логіка та цикли. Усі з трьох претиндентів дозволяють створювати «Захищені домішки». Тобто. домішки, які виконуються, якщо сама умова є істиною. Корисна річ, якщо ми хочемо накрутити якнайбільше логіки та динаміки на вихідний продукт. SASS додатково до всього цього ще й надає циклічні оператори (for, while та each) та ряд додаткових. логічних ( if/then/else ), яких у LESS і Stylus просто немає. SASS так само вміє збирати сво-ва в єдине ціле. Наприклад, якщо Ви поставите backround за допомогою картинки, нижче за допомогою лінійного градієнта, то на виході Ви отримаєте зібране в єдине ціле, структурованесво-во з вендорними префіксами, якщо ж ви включили їх у конфігураційному файлі.

Продовжуючи порівнювати їх я лише підкреслював собі, що SASS більш потужний і розвинений мову стосовно LESS і Stylus. Так само було відмічено, що і з математикою у SASS набагато краще. Наприклад, якщо спробувати скласти 10px і 5em, то LESS на виході видасть 15px, що дивно загалом. SASS повідомить нам про помилку у цьому випадку “Incompatible units: 'em' and 'px'”.

Єдиний мінус, якщо його так можна назвати звичайно - досить слабка документація щодо SASS. LESS в даному випадку поза конкуренцією зі своїми російськими англомовними яскравими сайтами. Але як не крути, хто хоче, той завжди знайде та розбереться.

Встановлення та початкове налаштування SASS + Compass.

Установка в Linux і Windows відрізняється лише перших етапах. Давайте розглянемо їх.

1. Встановлення Ruby. – Lunux (Ubuntu) – sudo apt-get update && apt-get upgrade && apt-get install ruby – Windows — завантажити виконуваний файл Ruby Installer та встановити його.

2. Встановлення SASS. - All - gem install sass

3. Встановлення Compass - All - gem install compass

На цьому встановлення стека SASS+Compass закінчується. Давайте подивимося як нам розгорнути свій перший проект і зробити необхідні настройки.

Для цього нам необхідно створити директорію в якій надалі зберігатиметься наш проект і виконати команду: compass init Після цього в даній директорії повинні з'явитися файли стилів *.sass і конфігураційний файл для Compass (config.rb). У ньому зберігаються основні налаштування, такі як шляхи до директорій SASS, CSS, JS, IMAGES. Що дозволяє нам перенести їх до будь-якого місця в системі і прописати до них реальний шлях. Також тут можнаувімкнути мінімізацію CSS стилів під час складання.

Команди: – запуск вотчера, який стежить за зміною файлів та перезбирає CSS – compass watch