Від автора: 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.
