Следим и компилируем Sass, за пять быстрых шагов

Sass — возможно самый популярный препроцессор CSS; годами он помогал нам писать чистый, многоразовый и модульный CSS. В этом кратком руководстве я расскажу о том, что важно, и объясните, как скомпилировать Sass в CSS, используя командную строку.

1. Установка Node.js

Чтобы скомпилировать Sass через командную строку, для начала нам нужно установить node.js. Загрузите его с официального сайта nodejs.org, распакуйте и следуйте помощнику.

2. Инициализация NPM

NPM - это менеджер пакетов для Node на языке 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

  "name": "sass-tutorial",

3

  "version": "1.0.0",

4

  "description": "",

5

  "main": "index.js",

6

  "scripts": {

7

    "test": "echo \"Error: no test specified\" && exit 1"

8

  },

9

  "author": "",

10

  "license": "ISC"

11

}

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

1

"scripts": {

2

  "test": "echo \"Error: no test specified\" && exit 1",

3

  "scss": "node-sass -watch scss -o css"

4

}

Давайте рассмотрим эту строку по словам.

1. node-sass: Ссылается на пакет node-sass.
2. -watch: Дополнительный флаг, который означает “следить за всеми .scss файлами в папке scss/ и перекомпилировать их каждый раз когда они изменяются.”
3. scss: Название папки, куда мы положим все наши .scss файлы.
4. -o css: Папка куда выдаются скомпилированные CSS.

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

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

Для выполнения нашего одностраничного скрипта, нам нужно запустить в терминале следующую команду: npm run scss

И вуаля! Мы следим и компилируем SASS.

Быстрый совет Sass

Оставайтесь на связи, чтобы получить больше быстрых советов Sass.