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

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

Содержание:

1. Что такое Sass.
   1. Зачем нужен.
   2. Как его использовать.
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, перечислим его некоторые возможности:

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

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

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

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

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

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

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

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

npm i gulp-sass --save-dev

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

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/aseets/css/")); // выгружаем результат 
}

exports.sass = sass;

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

Например, outputStyle:

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

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

Резюмируя.

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/assets/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.

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

function sass() {
    return src("app/assets/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. Автоматическое обновление страницы в Gulp при изменении кода (3 часть).
4. Babel для Gulp (4 часть).
5. Моментальная загрузка сайта на хостинг и синхронизация файлов - gulp-rsync (5 часть).