Препроцессинг с помощью Gulp

Мы можем скомпилировать Sass в CSS через Gulp с помощью плагина под названием gulp-sass. Вы можете установить gulp-sass в свой проект с помощью команды npm install, как мы это уже делали для gulp.

Также следует использовать флаг --save-dev, который гарантирует, что gulp-sass будет добавлен в devDependencies внутри файла package.json.

$ npm install gulp-sass --save-dev

Перед использованием плагина нам потребуется подключить gulp-sass из папки node_modules через require, как мы это уже делали с gulp.

var gulp = require('gulp');
// Подключаем плагин gulp-sass
var sass = require('gulp-sass');

Мы можем использовать gulp-sass, заменив aGulpPlugin() на sass(). Поскольку задача предназначена для компиляции Sass в CSS, то назовем её sass.

gulp.task('sass', function(){
  return gulp.src('source-files')
  .pipe(sass()) // Используем gulp-sass
  .pipe(gulp.dest('destination'))
});

Для работы задачи sass ей нужно предоставить исходные файлы и место назначения, поэтому создадим файл styles.scss в папке app/scss. Этот же самый файл добавим в метод gulp.src.

Мы хотим вывести конечный файл styles.css в папку app/css, которая будет местом назначения для метода gulp.dest.

gulp.task('sass', function(){
  return gulp.src('app/scss/styles.scss')
  .pipe(sass()) // Конвертируем Sass в CSS через gulp-sass
  .pipe(gulp.dest('app/css'))
});

Теперь следует проверить, что задача sass работает желаемым образом. Для этого мы можем добавить функцию Sass в styles.scss.

// styles.scss
.testing {
  width: percentage(5/7);
}

Если в командной строке выполнить gulp sass, то можно увидеть как в app/css появился файл styles.css. Кроме того, этот файл содержит код, при котором запись percentage(5/7) была пересчитана в 71,42857%.

/* styles.css */
.testing {
  width: 71.42857%; 
}

Теперь мы знаем, что задача sass работает!

gulp-sass для преобразования Sass в CSS использует LibSass. Эта библиотека работает намного быстрее, чем методы на основе Ruby. При желании вы все равно можете включить методы Ruby, используя gulp-ruby-sass или gulp-compass.

Иногда нужна возможность одновременной компиляции нескольких файлов .scss в CSS. Мы можем сделать это с помощью подстановок.