Nanometers Per Millisecond
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



    Build Status

    SCSS-Lint plugin for gulp.

    scss-lint is a Ruby gem written by The Causes Engineering Team. This plugin wraps the scss-lint binary for gulp and provides default and failure reporters.


    npm install gulp-scsslint --save-dev

    This plugin requires Ruby and scss-lint to be installed. If you're on OS X or Linux you probably already have Ruby installed.

    From a terminal:

    ruby -v # test that Ruby is installed 
    gem update --system && gem install scss-lint


    var scsslint = require('gulp-scsslint');
    var gulp = require('gulp');
    gulp.task('lint', function() {

    Excluding files

    Use file globbing and pattern negation to exclude files that should not be linted (e.g. vendor files):

    gulp.src(['styles/*.scss', '!styles/vendor.scss'])

    If you use the same task for linting and sass transpilation, then gulp-filter can temporarily remove the vendor files from the pipe:

    gulp.task('sass', function() {
      var gulpFilter = require('gulp-filter');
      var vendorFilter = gulpFilter('!styles/vendor.scss');
        .pipe(vendorFilter)           // temporarily filter out vendor.scss
        .pipe(vendorFilter.restore()) // restore vendor.scss to the piped files

    But it's probably better to use two separate tasks:

    gulp.task('lint', function() { ... });
    gulp.task('sass', ['lint'], function() { ... });




    Type: String

    You can pass the path to your .scss-lint.yml file directly to the plugin, though if your config file uses the standard file name and location then SCSS-Lint will find it by default.




    Type: Object

    For example:

      config: 'my-scss-lint.yml',
      bin: 'bundle exec scss-lint',
      args: ['--exclude=vendor.scss'] // see caveat below
    options property: config

    Type: String

    Path to your .scss-lint.yml file. Default is undefined.

    options property: bin

    Type: String

    The scss-lint call signature. Default is scss-lint. In the context of bundler, bundle exec scss-lint might be preferable.

    options property: args

    Type: Array

    An array of additional arguments supported by scss-lint. See scss-lint --help for options.

    For example:

    args: ['--exclude=vendor.scss']

    N.B.: Most options will conflict with this plugin or cause inconsistent results. For example, --exclude will cause an error to be emitted if all files passed to scss-lint are excluded; and excluded files will be marked us as successfully linted: excluded_file.scsslint = {success: true}. Use these options with caution.

    N.B.: Options should not include a space between the option property and the value.


    Adds the following properties to the file object:

      file.scsslint.success = true; // or false
      file.scsslint.errorCount = 0; // number of errors returned by SCSS-Lint
      file.scsslint.results = []; // SCSS-Lint errors

    The objects in results have all the properties of the issue tags in SCSS-Lint's XML output, for example:

    file.scsslint.results = [{
      'line': 123,
      'column': 10,
      'severity': 'warning', // or `error`
      'reason': 'a description of the error'



    The default reporter logs SCSS-Lint warnings and errors using a format similar to SCSS-Lint's default.


    Example output:

    test/fixtures/error.scss:3 [E] Invalid CSS after "  font": expected ";", was ":"
    test/fixtures/warning.scss:2 [W] Color `black` should be written in hexadecimal form as `#000`

    Fail Reporter

    By default, only program errors cause errors to be emitted on the stream. If you would also like SCSS-Lint warnings and errors to cause errors to be emitted on the stream (for example, to fail the build on a CI server), use the 'fail' reporter.

    This example will log the errors using the default reporter, then fail if SCSS-Lint found any issues in the SCSS.


    Custom Reporters

    Custom reporter functions can be passed as scsslint.reporter(reporterFunc). The reporter function will be called for each linted file that includes an error or warning and passed the file object as described above.

    If the custom reporter returns non-falsey, the returned value will be provided to the stream callback and will generate an error.

    var scsslint = require('gulp-scsslint');
    var gulp = require('gulp');
    var gutil = require('gulp-util');
    var myReporter = function(file) {
      gutil.log(file.scsslint.errorCount + ' errors');
    gulp.task('lint', function() {
      return gulp.src('styles/*.scss')

    See src/reports.js for more detailed examples.


    npm i gulp-scsslint

    Downloadsweekly downloads








    last publish


    • avatar