Від автора: Sass, можливо, самий популярний CSS-препроцесор. Багато років він допомагає нам писати чистий, повторно використовуваний і модульний CSS. У цьому невеликому уроці я відразу перейду до суті справи і поясню, як компілювати Sass в CSS за допомогою командного рядка.
1. Установка Node.js
Щоб компілювати Sass через командний рядок, спершу необхідно встановити node.js. Скачайте бібліотеку з офіційного сайту nodejs.org відкрийте пакет і дотримуйтесь інструкцій.
2. Ініціалізувати NPM
NPM — Node Package Manager для JavaScript. NPM спрощує установку і видалення сторонніх пакетів. Для ініціалізації Sass-проекту за допомогою NPM відкрийте термінал і змініть директорію (CD) на папку проекту.
В коректній папці запустіть команду npm init. Далі необхідно відповісти на кілька питань з проектом, після чого NPM згенерує файл package.json в папці проекту.
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.
