Сборка CSS, SCSS и SASS с помощью node-sass

Обычно сборку SCSS и SASS делают с помощью специальных сборщиков Webpack или Gulp. Да, эти инструменты хороши, но когда ты делаешь простой сайт или лендинг, то настройка этих самых сборщиков может занять очень много времени. Я покажу как за несколько минут можно настроить сборку и минимизацию стилей при помощи пакета node-sass. Для выполнения всех приведенных действий вам потребуется установленный nodejs.

Немного о SCSS и SASS

SCSS - это по сути тот же CSS только с возможностью использовать переменные, как в PHP $имя_переменной. А SASS(Syntactically Awesome Stylesheets) - это SCSS с упрощенным синткасисом без фигурных скобок и точек с запятой в конце каждой строки. Оба языка позволяют использовать переменные в таблицах стилей, а так же импортировтаь и объединять стили между собой. Хотя, на данный момент CSS уже поддерживает переменные нативно, еще не все браузеры их поддерживают(привет IE!). 

Как правило, в более сложных веб-приложениях файлы стилей разделяются на исходники и сборки. Исходники стилей принято разделять на отдельные файлы. Например, стили для таблиц в одном файле, стили списков в другом и так далее. Потом это все объединяется с помощью директивы @import в один главный sass файл, который обрабатывается препроцессором в обычный CSS.

Если вы пользуетесь CSS фреймворками, такими как bootstrap или bulma, с помощью SASS вы сможете легко кастомизировать их. 

Пример стилей на SCSS:

$base-text: #343434;
$gray-text: #BBB;

p {
  color: $base-text;
}

p.gray {
  color: $gray-text;
}

Пример стилей на SASS:

$base-text: #343434
$gray-text: #BBB

p
  color: $base-text

p.gray
  color: $gray-text

Настройка и подготовка проекта

Инициализация проекта и установка node-sass

mkdir node-sass
cd node-sass
npm init -y
npm i node-sass --save-dev

После завершания установки в папке должны появиться следующие файлы:

ls
node_modules  package.json  package-lock.json

Теперь надо создать папки для исходников, где будут лежать SASS-стили и папку, куда будут складываться собранные стили. 

mkdir -p src/sass
mkdir -p public/build

 В директории src/sass будут лежать исходники, а в public/build собранные стили.

Установка Bootstrap и создание таблиц стилей

В качестве примера я буду использовать CSS фреймворк Bootstrap 4 и несколько собственных таблиц силей.

Для начала надо установить bootstrap:

npm i bootstrap

Теперь можно создать несколько таблиц стилей и подключить Bootstrap в наш проект. Я создам один главный файл theme.sass, импортирую в него bootstrap и добавлю несколько кастомных стилей.

Вот что получилось:

@import 'bootstrap/scss/bootstrap'

$main-color: #4c4c4c
$main-bg: #fafafa

body
  background-color: $main-bg

p
  color: $main-color

Строка @import 'bootstrap/scss/bootstrap' означает импорт файла корень_проекта/node_modules/bootstrap/scss/bootstrap.scss (расширение файла можно не указывать). В данном случае импортируются все стили библиотеки bootstrap. Но можно импортировать их и частями, если открыть папку node_modules/bootstrap/scss, то вы увидите много файлов scss. Например, если хотите использовать только сетку, то надо импортировать файл bootstrap-grid.scss. 

Имя импортируемого файла может быть относительно текущего файла, например @import './lists' либо относительно директории node_modules, как в моем примере. Если вы указываете путь относительно node_modules надо будет добавить опцию --include-path node_modules для команды npx node-sass.

Сборка стилей

Теперь мы можем собрать наши стили. Мы будем использовать ранее установленный пакет node-sass. Для запуска бинарников из npm пакетов надо использовать консольную команду npx __название_пакета__. В нашем случае запуск node-sass будет выполняться командой npx node-sass.

Запускаем сборку:

npx node-sass \
--include-path node_modules \
--output-style compressed \
src/sass/theme.sass > public/build/theme.css

Если команда выполнилась без ошибок, то должен появиться файл public/build/theme.css - это и есть наш собранный и минимизированный CSS, который теперь можно подключить к html странице.

Во время разработки сайта, чтобы каждый раз не выполнять команду для сборки стилей можно использовать опцию --watch. Тогда node-sass будет отслеживать изменения в исходниках стилей и автоматически пересобирать CSS.

Добавление команд в package.json

Синтаксис некоторых комманд получается довольно громоздкий. Чтобы каждый раз не воодить их полностью, им придумывают короткие alias'ы и сохраняют в файл package.json, в раздел scripts.

{
  "name": "node_sass_example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "sass": "npx node-sass --include-path node_modules --output-style compressed src/sass/theme.sass > public/build/theme.css",
    "sass:watch": "npx node-sass --watch --include-path node_modules --output-style compressed src/sass/theme.sass > public/build/theme.css",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.0.0"
  },
  "devDependencies": {
    "node-sass": "^4.7.2"
  }
}

После сохранения команд в package.json сборку можно выполнить командой npm run sass или npm run sass:watch чтобы css стили автоматически пересобиралились при изменении sass/scss исходников.