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

Gulp Sass. Установка, настройка, его возможности и применение в своих проектах.
  1. Что такое Sass.
    • 1.1 Зачем нужен.
    • 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, перечислим его некоторые возможности:

  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 gulp = require('gulp'),
      sass = require('gulp-sass');

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

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

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

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

});

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

Например, outputStyle:

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

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

Резюмируя.

'use strict';

const gulp = require('gulp'),
      sass = require('gulp-sass');

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

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

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

Выполним наш созданный таск (задачу) gulp-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 gulp = require('gulp'),
      sass = require('gulp-sass'),
      sourcemaps = require('gulp-sourcemaps');

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

        .pipe(sass({
            outputStyle: 'nested',
        })
          .on('error', sass.logError))
        .pipe(sourcemaps.write('.'))   // создание карты css.map в текущей папке

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

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

gulp-sourcemaps

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

gulp-sourcemaps внутри файла

Gulp notify

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

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

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

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

gulp-notify для sass

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

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

npm i gulp-notify --save-dev

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

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

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

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

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

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

Sass: вложенные правила

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

Sass: Ссылка на родительский селектор

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

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

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

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

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

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

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

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

Функции.

Функции в sass

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

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

Импорт файлов в sass

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

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

Статьи про Gulp

  1. Настройка Gulp (1 часть).
  2. Текущая статья - использование SASS в Gulp проекте (2 часть).
  3. Автоматическое обновление страницы при измении кода (3 часть).
Изучаем английский
EnglishRussian
Awesome StylesheetsУдивительные стили
GulpГлоток
DependenciesЗависимости
TaskЗадача
ReturnВозврат
DestinationПункт назначения
ImportИмпортировать
IncludeВключать
admin
04/12/2019 16:56