От автора: 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 в текстовом редакторе. Вы увидите примерно следующее:
1 2 3 4 5 6 7 8 9 10 11 |
{ "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, как показано ниже:
1 2 3 4 |
"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.
Автор: Zviad Sichinava
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.