Gulp Sass - установка, настройка и его возможности

Gulp Sass. Установка, настройка, его возможности и применение в своих проектах.

1. Что такое Sass.
   • Зачем нужен.
   • Как его использовать.
2. Установка, подключение и настройка gulp-sass.
3. Gulp Sourcemaps.
4. Gulp notify.
5. Возможности Sass.

Что такое Sass

Sass (Syntactically Awesome Stylesheets) - это один из самых развитых, стабильных и многофункциональных препроцессоров. Пользуется большой популярностью у разработчиков. Sass - это более продвинутая версия CSS, которая имеет гораздо бо́льший набор возможностей, а также Sass предназначен для упрощения каскадных таблиц стилей.

Синтаксис Sass имеет 2 вида: SASS и SCSS. SCSS - более похож на CSS, а SASS - отличается отсутствием фигурных скобок. Вложенные элементы реализованы за счёт отступов. Именно такой синтаксис мы будем здесь использовать.

Зачем нужен Sass

Чтобы понять, зачем нужен Sass, перечислим его некоторые возможности:

1. Sass позволяет вкладывать правила CSS друг в друга
2. Вложенность свойств
3. Использование переменных
4. Поддержка арифметических операций
5. Операции с цветами
6. Возможность импортировать в sass файл sass, scss и css файлы
7. Использование миксинов
8. И многое другое

Если коротко зачем нужен Sass: он ускоряет и упрощает процесс разработки.

Как использовать Sass

Существуют разные способы начать использовать Sass:

1. C помощью приложений (Koala, CodeKit, Compass и другие)
2. C помощью командной строки
3. Используя таск-менеджеры
4. Простым конвертированием Sass в CSS с помощью онлайн-сервисов

Рассмотрим использование Sass для таск-менеджера Gulp. Перед тем как начать установку, желательно ознакомиться с основами Gulp.

Установка, подключение и настройка gulp-sass

Для установки плагина gulp-sass в наш проект, откроем командную строку в папке проекта. Введём следующую команду:

npm i gulp-sass --save-dev

Плагин будет установлен в папку node_modules и будет добавлена соответствующая запись в файле package.json. После успешной установки нам нужно подключить наш пакет в файле gulpfile.js.

'use strict';

const { src, dest, series, parallel, watch } = require('gulp');
const sass = require('gulp-sass');

Теперь создадим задачу (таск) sass.

function sass() {
    return src('app/sass/**/*.sass')  // берём все sass-файлы

        .pipe(sass())                 // компиляция sass в css

        .pipe(dest('dist/css'));      // выгружаем результат

}

exports.sass = sass;

В скобках sass({}) можно задавать дополнительные настройки.

Например, outputStyle:

• expanded - полностью развёрнутый CSS;
• nested - показывает вложенность (по умолчанию);
• compact - каждый селектор на новой строке;
• compressed - всё в одну строку.

Если вдруг мы допустим ошибку, то можно вывести на экран сообщение в каком месте она находится. Для этого добавим .on('error', sass.logError).

Резюмируя.

'use strict';

const { src, dest, series, parallel, watch } = require('gulp');
const sass = require('gulp-sass');

function sass() {
    return src('app/sass/**/*.sass')
        .pipe(sass({
            outputStyle: 'nested',     // вложенный (по умолчанию)

        }).on('error', sass.logError)) // уведомление об ошибках

        .pipe(dest('dist/css'));
}

exports.sass = sass;

Выполним наш созданный таск (задачу) gulp-sass. В командной строке введём gulp sass.

Gulp автоматически преобразовал SASS в CSS и создал файл styles.css.

Gulp Sourcemaps

Добавим поддержку source maps для Gulp. Это специальная структура данных, которая при преобразовании данных отражает что было и что стало, эта информация записывается либо в итоговом файле с расширением .map, либо в внутри исходника.

Таким образом, во время разработки, мы можем смотреть исходный файл sass, а не скомпилированный css. Становится понятным откуда какая строка кода берется.

Установка плагина gulp-sourcemaps.

npm i gulp-sourcemaps --save-dev

Добавим gulp-sourcemaps в gulpfile.js.

'use strict';

const { src, dest, series, parallel, watch } = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');

function sass() {
    return src('app/sass/**/*.sass')
        .pipe(sourcemaps.init())       // активируем gulp-sourcemaps

        .pipe(sass({
            outputStyle: 'nested'      // вложенный (по умолчанию)

        }).on('error', sass.logError)) // уведомление об ошибках

        .pipe(sourcemaps.write('.'))   // создание карты css.map в текущей папке

        .pipe(dest('dist/css'));
}

exports.sass = sass;

Для создания sourcemaps в текущей папке отдельным файлом, используем параметр «точка» write('.'), которая означает текущий каталог.

Если необходимо записать sourcemaps внутрь файла в виде base64, то write используется без параметров - write().

Gulp notify

На данный момент, обработку ошибок в sass-файле мы ловим в следующей строке.

.on('error', sass.logError))

Данный способ отображает ошибки в sass только в терминале (консоли). Чтобы при совершении ошибки мы были опративно уведомлены, установим плагин gulp-notify.

Это позволит получать следующие уведомления на рабочем столе.

Как видите это очень удобно. Сразу видно в каком файле и на какой строке была совершена ошибка.

Установка gulp-notify.

npm i gulp-notify --save-dev

Замените .on('error', sass.logError)) следующим кодом.

.on('error', notify.onError())

Теперь вы будете получать уведомления об ошибках на рабочем столе.

Возможности Sass

Их огромное количество, рассмотрим лишь самые популярные. С полным списком можно ознакомиться на официальном сайте.

Вложенность правил.

Ссылка на родительский селектор &.

Вложенность свойств.

Использование переменных $.

Арифметические операции с числами.

Арифметические операции с цветами.

Функции.

Использование функций в sass официальный сайт.

Импорт .sass, .scss и .css файлов.

Использование миксинов.

Статьи про Gulp

1. Настройка Gulp (1 часть).
2. Текущая статья - использование SASS в Gulp проекте (2 часть).
3. Автоматическое обновление страницы при измении кода (3 часть).