Ми можемо скомпілювати 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.
<code data-language="javascript">var gulp=require('gulp'); //Підключаємо плагін gulp-sass var sass=require('gulp-sass');Ми можемо використовувати gulp-sass, замінивши aGulpPlugin() на sass(). Оскільки завдання призначене для компіляції Sass CSS, то назвемо її sass.
<code data-language="javascript">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.
<code data-language="javascript">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. Ми можемо зробити це за допомогою підстановок.