Вивчаємо sass. Встановлення та налаштування.

Всім привіт! Сьогодні ми почнемо вивчати Sass, і в кінці серії статей ви будете прекрасно володіти даними препроцесором.

Отже, Sass - найзріліший, стабільний, потужний і професійний препроцесор в світі. Саме так про нього пишуть розробники на офіційному сайті, і це дійсно так. Звичайно, існують і інші препроцесори, які теж дуже гарні, наприклад, less, тому я лише опишу, як його використовувати, які у нього є особливості, і ви зможете вирішити, чи варто вам використовувати цей препроцесор чи ні.

Отже, перейдіть за посиланням і встановіть препроцесор Sass. В установці немає нічого складного, і на сайті все описано дуже докладно, так що зупинятися на цьому ми не будемо, а відразу перейдемо до використання.

Створимо структуру проекту такого вигляду:

sass
assets
public
css
index.html

зміст index.html:

 
lang="En"gt; 
 
charset="Utf-8"gt; 
Sass 
rel="Stylesheet"href="Css / app.css"gt; 
 
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, ipsum!

Папка css порожня. У ній буде скомпільований .css файл. Давайте цим і займаємося. Створіть в папці assets папку styles, а в цій папці файл app.scss. Напишемо в цьому файлі простий код стилізації:

p { 
 color: green- 
}

Тепер скомпілюємо цей файл в той формат, який розуміє браузер. Відкрийте термінал і напишіть наступне:

// Формат введення команд: sass [input] [output] 
sass assets/styles/app.scss public/css/app.css

Тепер у нас з`явився самий звичайний css файл в папці css, а браузер застосував заданий нами стиль. Щоб не компілювати файл кожного разу, коли ви вносите зміни, вручну, давайте автоматизуємо цей процес.