gulp-ruby-sass

Compile Sass to CSS with Ruby Sass

This is slower than gulp-sass, but more stable and feature-rich.

Issues with the output should be reported on the Sass issue tracker.

Install

$ npm install --save-dev gulp-ruby-sass

You also need to have Ruby and Sass installed. If you're on OS X or Linux you probably already have Ruby; test with ruby -v in your terminal. When you've confirmed you have Ruby, run gem install sass to install Sass.

Usage

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

gulp.task('default', function () {
	return gulp.src('src/scss/app.scss')
		.pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
		.pipe(gulp.dest('dist/css'));
});

Include all the files Sass needs to compile CSS in your gulp.src() glob, including the Gemfile and Gemfile.lock if necessary.

Use gulp-watch to watch and recompile your files.

Note to users upgrading from < 0.6.0 versions: 0.6.0 removes a loophole that implicitly loaded all files in the same directory as the file being processed. Edit your gulp.src() globs to include every file you need to make available to the Sass command.

API

sass(options)

options

sourcemap

Type: Boolean
Default: false

Enable Source Map. Requires Sass >= 3.3.0 and the sourcemapPath option.

sourcemapPath

Type: string

A relative path from the output CSS directory to the Sass source directory as seen by your web server.

Because gulp-ruby-sass can't know your CSS destination directory or your server setup you have to give a little extra information to help the browser find sourcemaps. Examples:

If source is site/scss, destination is site/css, and you're serving from site: { sourcemapPath: '../scss' }.
If source is app/styles, destination is .tmp/styles, and you're serving both .tmp and app: { sourcemapPath: '.' }.