Отслеживаем и компилируем Sass в 5 быстрых шагов

Отслеживаем и компилируем Sass в 5 быстрых шагов

От автора: 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 в текстовом редакторе. Вы увидите примерно следующее:

В ячейке scripts добавьте команду scss под командой test, как показано ниже:

Давайте разберем строку по словам:

node-sass: ссылка на пакет node-sass;

—watch: необязательный флаг, который значит «следить за всеми файлами .scss в папке scss/ и при внесении изменений повторно компилировать их»;

scss: имя папки, откуда мы берем все файлы .scss;

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

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

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

Чтобы выполнить наш скрипт в одну строку, необходимо запустить следующую команду в терминале: npm run scss. И вуаля! Мы следим и компилируем SASS.

Отслеживаем и компилируем Sass в 5 быстрых шагов

Автор: Zviad Sichinava

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: