Від автора: у цій главі ми розглянемо покроково, як проходить установка Sass, файли якого виконуються з допомогою Ruby.
Системні вимоги Sass
ОС – багатоплатформовий
Підтримка в браузерах – IE 8+, Firefox, Google Chrome, Safari, Opera
Мова програмування – Ruby
Установка Ruby
Крок 1 – Відкрийте посилання https://www.ruby-lang.org/en/downloads/, ви побачите наступне:
Завантажте Current stable версію (zip файл). Крок 2 – запустіть установку Ruby. Крок 3 – додайте Ruby папку bin в змінну користувача та системну змінну PATH, для роботи з гемами. Користувацька змінна Path:
Клацніть правою кнопкою миші на іконці Мій комп’ютер.
Виберіть властивості.
Клацніть Додаткові параметри системи – Параметри середовища.
У вікні параметри середовища два рази клікніть по PATH, як показано на скріншоті нижче:
Відкриється вікно зміни користувацької змінної. Вкажіть шлях до папки Ruby bin значення змінної (C:\Ruby\bin). Шлях вже встановлений на інші файли, тому в кінці поставте крапку з комою і поле вставте шлях до папки, як показано нижче.
Клікніть ОК — Системні змінні — Клікніть на кнопку Створити.
Відкриється вікно створення нової системної змінної.
В якості імені вкажіть RubyOpt, значення rubygems. Натисніть ОК. Крок 4 – відкрийте командний рядок і введіть наступну команду:
gem install sass
Крок 5 – після успішної установки Sass ви побачите наступне.
Приклад
Нижче наведено простий приклад 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
Коли ви запустите команду зверху, файл style.css створиться автоматично. Коли б ви не змінили файл SCSS, style.css автоматично підтягне всі зміни.
Файл style.css буде мати наступний код, коли ви запустите команду зверху.
h1 {
color: #AF80ED;
}
h3 {
color: #DE5E85;
}
Давайте виконаємо наступні кроки, щоб побачити все це у дії. Збережіть код вище hello.html. Відкрийте цей файл у браузері
