Wondering what’s next for npm?Check out our public roadmap! »

    gulp.sass

    1.3.9 • Public • Published

    This is a copy of gulp-sass with built-in node-sass@2.1.1 package.

    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.

    If you want to use the indented syntax (.sass) as the top level file, use sass({indentedSyntax: true}).

    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.

    Install

    npm i gulp.sass

    DownloadsWeekly Downloads

    12

    Version

    1.3.9

    License

    MIT

    Last publish

    Collaborators

    • avatar