Отслеживаем и компилируем 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 быстрых шагов


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

В корректной папке запустите команду 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 быстрых шагов

Автор: Zviad Sichinava

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree