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

21

Від автора: 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 швидких кроків