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

Russian (Pусский) translation by Lexie Bykova (you can also view the original English article)

Final product image — What You'll Be Creating

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

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

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

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

NPM - это менеджер пакетов для Node на языке JavaScript. NPM упрощает установку и удаление сторонних пакетов. Для инициализации проекта Sass с помощью NPM, откройте ваш терминал и перейдите в каталог вашего проекта, используя команду CD (смените каталог).

Navigating to SASS-tutorial folder — Переход к папке проекта Sass

Как только вы добрались до нужной папки, выполните команду 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 в вашем редакторе кода. Вы увидите что-то вроде этого:

{
  "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

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