No description
Go to file
2015-01-13 20:49:16 -08:00
test update to node-sass version 2 beta 2015-01-04 08:25:18 -08:00
.gitignore Add node_modules to gitignore 2013-12-14 18:23:28 -08:00
.npmignore Version 1.3.1 2015-01-13 20:49:16 -08:00
.travis.yml Update .travis.yml 2014-12-10 18:35:57 -08:00
CHANGELOG.md Version 1.3.1 2015-01-13 20:49:16 -08:00
index.js Fix undefined variable 2015-01-14 15:42:01 +11:00
LICENSE Initial commit 2013-08-31 14:01:20 -07:00
package.json Added CHANGELOG and fix version 2015-01-13 17:27:35 -08:00
README.md changes spelling of Sass in README. it's Sass not SASS :) 2015-01-13 16:27:52 -05:00

Build Status

gulp-sass

Sass plugin for gulp.

#Install

npm install gulp-sass

#Basic Usage

Something like this:

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

gulp.task('sass', function () {
	gulp.src('./scss/*.scss')
		.pipe(sass())
		.pipe(gulp.dest('./css'));
});

Options passed as a hash into sass() will be passed along to node-sass

gulp-sass specific options

errLogToConsole: true

If you pass errLogToConsole: true into the options hash, sass errors will be logged to the console instead of generating a gutil.PluginError object. Use this option with gulp.watch to keep gulp from stopping every time you mess up your sass.

onSuccess: callback

Pass in your own callback to be called upon successful compilation by node-sass. The callback has the form callback(css), and is passed the compiled css as a string. Note: This does not prevent gulp-sass's default behavior of writing the output css file.

onError: callback

Pass in your own callback to be called upon a sass error from node-sass. The callback has the form callback(err), where err is the error string generated by libsass. Note: this does prevent an actual gulpPluginError object from being created.

sync: true

If you pass sync: true into the options hash, sass.renderSync will be called, instead of sass.render. This should help when memory and/or cpu usage is getting very high when rendering many and/or big files.

Source Maps

gulp-sass can be used in tandem with gulp-sourcemaps to generate source maps for the SASS to CSS compilation. You will need to initialize gulp-sourcemaps prior to running the gulp-sass compiler and write the source maps after.

var sourcemaps = require('gulp-sourcemaps');

gulp.src('./scss/*.scss')
  .pipe(sourcemaps.init())
    .pipe(sass())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./css');

// will write the source maps inline in the compiled CSS files

By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a relative file path in the sourcemaps.write() function.

var sourcemaps = require('gulp-sourcemaps');

gulp.src('./scss/*.scss')
  .pipe(sourcemaps.init())
    .pipe(sass())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./css'));

// will write the source maps to ./dest/css/maps

#Imports and Partials

gulp-sass now automatically passes along the directory of every scss file it parses as an include path for node-sass. This means that as long as you specify your includes relative to path of your scss file, everything will just work.

scss/includes/_settings.scss:

$blue: #3bbfce;
$margin: 16px;

scss/style.scss:

@import "includes/settings";

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

#Issues

Before submitting an issue, please understand that gulp-sass is only a wrapper for node-sass, which in turn is a node front end for libsass. Missing sass features and errors should not be reported here.