gulp-ruby-sass

Compile Sass to CSS with Ruby Sass

gulp-ruby-sass

Compiles Sass with the Sass gem.
To compile Sass with libsass, use gulp-sass

You must have Sass >= 3.4.

$ npm install --save-dev gulp-ruby-sass
  • gulp-ruby-sass is a gulp source adapter. Use it instead of gulp.src.
  • gulp-ruby-sass doesn't support globs yet, only single files or directories. Just like Sass.
  • gulp-ruby-sass doesn't support managing errors with plumber yet (issue).
  • gulp-ruby-sass doesn't support incremental builds yet (issue).
  • gulp-ruby-sass doesn't alter Sass's output in any way. Problems with Sass output should be reported to the Sass issue tracker.

Use gulp-ruby-sass instead of gulp.src to compile a file or directory.

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
 
gulp.task('sass', function() {
    return sass('source/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('result'));
});

Use gulp-watch to automatically recompile your files on change.

Handle Sass errors with an on('error', cb) listener. gulp-ruby-sass throws errors like a gulp plugin, but streams the erroring files so you can see Sass errors in your browser too.

Type: Boolean
Default: false

Gives some extra information for debugging, including the actual spawned Sass command.

Type: Boolean
Default: false

Run sass with bundle exec.

Type: Boolean
Default: false

Requires Sass >= 3.4 and gulp-sourcemaps.

Inline sourcemaps are recommended, as they "just work".

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('sass', function() {
    return sass('source', { sourcemap: true })
    .on('error', function (err) {
      console.error('Error', err.message);
   })
 
    .pipe(sourcemaps.write())
 
    .pipe(gulp.dest('result'));
});

File sourcemaps require you to serve the sourcemap location so the browser can read the files. See the gulp-sourcemaps readme for more info.

gulp.task('sass', function() {
    return sass('source', { sourcemap: true })
    .on('error', function (err) {
      console.error('Error', err.message);
   })
 
    .pipe(sourcemaps.write('maps', {
        includeContent: false,
        sourceRoot: '/source'
    }))
 
    .pipe(gulp.dest('result'));
});

Type: String
Default: gulp-ruby-sass

Name of the temporary directory used to process files. If you're running multiple instances of gulp-ruby-sass at once, specify a separate container for each task to avoid files mixing together.

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
 
gulp.task('sass-app', function() {
    return sass('source/app.scss', { container: 'gulp-ruby-sass-app' })
    .on('error', function (err) {
      console.error('Error', err.message);
   })
    .pipe(gulp.dest('result/app'));
});
 
gulp.task('sass-site', function() {
    return sass('source/site.scss', { container: 'gulp-ruby-sass-site' })
    .on('error', function (err) {
      console.error('Error', err.message);
   })
    .pipe(gulp.dest('result/site'));
});
 
gulp.task('sass', ['sass-app', 'sass-site']);

Any other options are passed directly to the Sass executable. gulp options are camelCase versions of Sass's dashed-case options.

The docs below list common options for convenience. Run sass -h for the complete list.

Type: String
Default: false

Specify a Sass import path.

Type: String
Default: false

Require a Ruby library before running Sass.

Type: Boolean
Default: false

Make Compass imports available and load project configuration.

Type: String
Default: nested

Output style. Can be nested (default), compact, compressed, or expanded.

Type: Boolean
Default: false

Recompile every Sass file, even if the CSS file is newer.

Type: Boolean
Default: false

If a file fails to compile, exit immediately.

Type: String
Default: false

Specify the default encoding for input files.

Type: Boolean
Default: false

Use Unix-style newlines in written files on non-Unix systems. Always true on Unix.

Type: Boolean
Default: false

Emit output that can be used by the FireSass Firebug plugin.

Type: Boolean
Default: false

Emit comments in the generated CSS indicating the corresponding source line.

Type: Boolean
Default: false

Just check syntax, don't evaluate.

Type: Number
Default: 5

How many digits of precision to use when outputting decimal numbers.

Type: String
Default: false

The path to save parsed Sass files. Defaults to .sass-cache.

Type: Boolean
Default: false

Don't cache parsed Sass files.

Type: Boolean
Default: false

Show a full Ruby stack trace on error.

Type: Boolean
Default: false

Silence warnings and status messages during compilation.

MIT © Sindre Sorhus