Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS

14

Від автора: у цій главі ми розглянемо покроково, як проходить установка Sass, файли якого виконуються з допомогою Ruby.

Системні вимоги Sass

ОС – багатоплатформовий

Підтримка в браузерах – IE 8+, Firefox, Google Chrome, Safari, Opera

Мова програмування – Ruby

Установка Ruby

Крок 1 – Відкрийте посилання https://www.ruby-lang.org/en/downloads/, ви побачите наступне:

Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS

Завантажте Current stable версію (zip файл). Крок 2 – запустіть установку Ruby. Крок 3 – додайте Ruby папку bin в змінну користувача та системну змінну PATH, для роботи з гемами. Користувацька змінна Path:

Клацніть правою кнопкою миші на іконці Мій комп’ютер.

Виберіть властивості.

Клацніть Додаткові параметри системи – Параметри середовища.

Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS

У вікні параметри середовища два рази клікніть по PATH, як показано на скріншоті нижче:

Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS

Відкриється вікно зміни користувацької змінної. Вкажіть шлях до папки Ruby bin значення змінної (C:\Ruby\bin). Шлях вже встановлений на інші файли, тому в кінці поставте крапку з комою і поле вставте шлях до папки, як показано нижче.

Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS

Клікніть ОК — Системні змінні — Клікніть на кнопку Створити.

Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS

Відкриється вікно створення нової системної змінної.

Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS

В якості імені вкажіть RubyOpt, значення rubygems. Натисніть ОК. Крок 4 – відкрийте командний рядок і введіть наступну команду:

gem install sass

Крок 5 – після успішної установки Sass ви побачите наступне.

Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS

Приклад

Нижче наведено простий приклад Sass.

Import example of sass

Simple Example

Welcome to TutorialsPoint

Тепер давайте створимо файл style.scss, який дуже схожий на CSS. Єдина відмінність – він зберігається з розширенням .scss. Обидва файлу .html і .scss необхідно створити в папці Ruby. Файл .scss можна зберегти в папці ruby\lib\sass\ (перед цим створіть папку).

h1{
color: #AF80ED;
}
h3{
color: #DE5E85;
}

За допомогою наступної команди ви можете змусити Sass стежити за файлом і оновлювати CSS, коли Sass файл змінюється.

sass —watch C:\ruby\lib\sass\style.scss:style.css

Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS

Коли ви запустите команду зверху, файл style.css створиться автоматично. Коли б ви не змінили файл SCSS, style.css автоматично підтягне всі зміни.

Файл style.css буде мати наступний код, коли ви запустите команду зверху.

h1 {
color: #AF80ED;
}
h3 {
color: #DE5E85;
}

Давайте виконаємо наступні кроки, щоб побачити все це у дії. Збережіть код вище hello.html. Відкрийте цей файл у браузері

Покрокова установка Ruby і Sass для автоматичного оновлення файлу CSS