Відстежуємо і компілюємо Sass в 5 швидких кроків

170

Від автора: Sass, можливо, самий популярний CSS-препроцесор. Багато років він допомагає нам писати чистий, повторно використовуваний і модульний CSS. У цьому невеликому уроці я відразу перейду до суті справи і поясню, як компілювати Sass в CSS за допомогою командного рядка.

Відстежуємо і компілюємо Sass в 5 швидких кроків

1. Установка Node.js

Щоб компілювати Sass через командний рядок, спершу необхідно встановити node.js. Скачайте бібліотеку з офіційного сайту nodejs.org відкрийте пакет і дотримуйтесь інструкцій.

2. Ініціалізувати NPM

NPM — Node Package Manager для JavaScript. NPM спрощує установку і видалення сторонніх пакетів. Для ініціалізації Sass-проекту за допомогою NPM відкрийте термінал і змініть директорію (CD) на папку проекту.

Відстежуємо і компілюємо Sass в 5 швидких кроків

В коректній папці запустіть команду npm init. Далі необхідно відповісти на кілька питань з проектом, після чого NPM згенерує файл package.json в папці проекту.

Відстежуємо і компілюємо Sass в 5 швидких кроків

3. Установка Node-Sass

Node-sass – NPM-пакет, компилирующий Sass в CSS (і робить він це дуже швидко). Щоб встановити node-sass, запустіть наступну команду в терміналі: npm install node-sass.

4. Пишемо команду Node-sass

Все готово до написання невеликого скрипта для компіляції Sass. Відкрийте файл package.json в текстовому редакторі. Ви побачите приблизно наступне:

{
“name”: “sass-tutorial”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “ISC”
}

У комірці scripts додайте команду scss під командою test, як показано нижче:

“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“scss”: “node-sass –watch scss -o css”
}

Давайте розберемо рядок за словами:

node-sass: посилання на пакет node-sass;

—watch: необов’язковий прапор, який означає «стежити за всіма файлами .scss в папці scss/ при внесенні змін повторно компілювати їх»;

scss: ім’я папки, звідки ми беремо всі файли .scss;

–o css: вихідна папка для скомпільованого CSS.

Після запуску скрипт буде стежити за всіма файлами .scss в папці scss/ і зберігати скомпільований CSS в папку css/ після внесення будь-яких змін у файли формату .scss.

5. Запуск скрипта

Щоб виконати наш скрипт в один рядок, необхідно запустити наступну команду в терміналі: npm run scss. І вуаля! Ми стежимо і компілюємо SASS.

Відстежуємо і компілюємо Sass в 5 швидких кроків