Using stylelint to enforce the Sass Guidelines project

Stylelint is a linter for CSS (and CSS-like syntaxes like Sass). It is designed similar to ESLint, so if you have worked with that stylelint will be very easy to pick up for you. For this little guide we want to use a plugin to enforce the Sass Guidelines defined here.

The first step is to install it using npm:

npm install --save-dev stylelint stylelint-config-sass-guidelines

Next create a .stylelintrc file with this content:

{
  "extends": "stylelint-config-sass-guidelines"
}

You can also add a rules object to override specific rules. Now with running the following command:

./node_modules/.bin/stylelint "resources/assets/sass/*.scss" --fix

Stylelint will automatically enumerate all scss files in this directory and fix all your code to adhere to the Sass guidelines. You will have to use quotes so that your shell won’t enumerate the files in that directory but stylelint will.

Check the GitHub Repo for the plugin to see what rules it configures.