Використовуйте Compass та Sass для CSS у наступному проекті

Sass можна назвати CSS 2.0; він має відмінні функції, що дозволяють писати гнучкий код і економити при цьому час. Сьогодні, у цій статті ми розберемо основи!

Що таке Sass?

Простіше кажучи, Sass інший підхід при роботі з CSS. Дозволяє вам зберігати простоту та читабельність CSS коду. Код нижче:

проекті

Після компіляції виглядає так:

compass

Ви можете ознайомитись із Sass документацією на http://sass-lang.com/

Що таке Compass?

Compass робить роботу із Sass ще простіше. Автор проекту Chris Eppstein також додав підтримку деяких сконвертованих фреймворків, таких як Blueprint, YUI і 960.gs. Compass легко інтегрувати в проекти засновані на Ruby, але його також легко додати до будь-якого іншого проекту. Compass є технологією з відкритим вихідним кодом та добре документований. Ви можете ознайомитись із вихідними джерелами та документацією.

наступному

Обидва інструменти, Sass (є частиною проекту Haml) та Compass встановлюються, як Ruby геми. Якщо ви не розумієте, про що йдеться, зверніть увагу на мій попередній туторіал Ruby on Rails для дизайнерів "Step 1 - установка Ruby on Rails", і продовжуйте скролити вниз доки не знайдете частину під назвою "Установка Rails".

Для встановлення обох гемів нам достатньо запустити одну команду:

sass

Після того, як ви побачите повідомлення, що обидва геми успішно встановлені, можете далі дотримуватися інструкцій у цьому туторіалі.

Налаштування проекту

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

Команда compass має безліч опцій і якщо запустити compass --help, вам відобразиться підказка з переліком даних опцій:

наступному

До слова: другий рядок зверху говорить "Loading haml-edge gem." це тому, що я використовую останню версію, вам не варто турбуватися якщо ваш висновок відрізняється від мого.

Тепер ми розпочнемо роботу над Compass проектом. Для його створення запустіть наступну команду (включаючи точку в кінці, яка повідомляє compass, де ми хочемо розмістити проект!)

Ви повинні побачити:

compass

Після ініціалізації, Compass зазвичай створює папку за замовчуванням для Sass під назвою src, але мені хотілося змінити це, тому я додав опцію. Якщо ви уважно подивіться в каталозі проекту, є файл під назвою config.rb і дві інші директорії.

Файл config.rb відповідає за конфігурацію, від якої залежить Compass, але в більшості випадків вам навіть не доведеться його чіпати. Також, як згадувалося в повідомленні, яке ми бачили після створення проекту, на наш вибір є три способи, як оброблятиметься наш Sass:

  • compass - використовуючи цю опцію, вам потрібно перебувати у відповідному каталозі і Compass скомпілює Sass один раз.
  • compass -u шлях/до/проекту - те саме, що й команда вище, але цього разу вам не потрібно перебувати в директорії проекту, вам слід передати шлях до проекту як параметр команди.
  • compass --watch [шлях/до/проекту] - дана команда досить зручна, оскільки запустивши її, Compass відстежуватиме зміни в Sass файлах і після того, як вони з'являться автоматично перекомпілює відповідний файл.

    • Тепер, коли ви знаєте, як налаштувати проект, я поясню деякі правила роботи з Sass

    Синтаксис Sass

    Зазвичай, працюючи з CSS, ви пишетещось на зразок:

    Проблема в тому, що в даному випадку ви повторюєте те саме ім'я багато разів. Давайте зробимо те саме з Sass. Я буду працювати з файлом screen.sass, так що видаліть все і ваш Sass буде виглядати як:

    Перший селектор не має відступу. Також всі властивості (колір, висота, ширина і так далі) починаються з двокрапки (цей синтаксис застарів, двокрапка слід ставити після назви властивості, йдеться про Sass Indented Syntax, примітку перекладача). Відповідно властивості #header мають відступ. Не важливо, чи використовуються таби або прогалини, але використовувати варто щось одне, інакше ви побачите помилку (яку я скоро вам покажу).

    Після властивостей іде наступний селектор. Так як він також має відступ, як і властивості, кінцевий CSS буде виглядати як #header a .

    Тепер коли ми трохи розібралися, спробуємо скомпілювати Sass: (в директорії нашого проекту)

    Давайте припустимо, що для відступів ви використовували як таби, так і прогалини, Compass видасть помилку:

    Знаючи CSS, процес навчання Sass не викличе у вас складнощів, оскільки головна різниця – це правила форматування. Далі, ми будемо працювати з більш просунутими (але водночас крутішими!) частинами Sass.

    Корисні особливості Sass

    Змінні

    Одна з надзвичайних особливостей Sass - можливість використовувати змінні, наприклад:

    Після компіляції ми отримаємо:

    Математичні висловлювання

    Можливо заголовок здасться вам забавним, але це правда ви можете виконувати математичні вирази у Sass! Для демонстрації ми будемо використовувати інтерактивний режим Sass, запустіть:

    Трохи погравшись, можна отримати такі результати: