I set up an environment to run Lint on Sass .scss files with gulp-scss-lint, so I’ll introduce the steps.

Installing scss-lint

Since gulp-scss-lint uses the scss-lint gem internally, first install scss-lint.

• brigade/scss-lint: Configurable tool for writing clean and consistent SCSS

gem install scss_lint

Or if you’re using bundler, add a file like this:

Gemfile

source "http://rubygems.org"
gem "scss_lint", "0.54.0"

and run bundle install.

Installing gulp-scss-lint

After installing scss-lint, next install gulp-scss-lint.

• juanfran/gulp-scss-lint: Gulp plugin to lint scss files with `scss-lint`

npm install gulp-scss-lint --save-dev

Gulp Task to Run Lint on .scss Files

Here’s sample code for a gulp task that runs Lint on .scss files in specific directories:

const gulp = require('gulp');
const scssLint = require('scss-lint');
const ROOT_DIR = '/app';

gulp.task('scss-lint', () => {
  return gulp.src(
    [
      `${ROOT_DIR}/hoge/assets/stylesheets/*.scss`,
      `${ROOT_DIR}/fuga/assets/stylesheets/*.scss`,
    ])
    .pipe(scssLint({
      'maxBuffer': 10000
    })
  );
});

Right after introducing lint, you’ll probably get lots of errors and warnings, so in that case, specify a large value for maxBuffer.

[Bonus] Installing Atom Package linter-scss-lint

Since I use the Atom editor, I also installed the linter-scss-lint package.

apm install linter-scss-lint

• linter-scss-lint | Atom Packages

That’s all from the Gemba.