Linting Sass

Linting is important. When it comes to SASS, Angular's CLI and Nrwl NX CLI will offer SASS linting out of the box.

sass-lint is a popular package that you can use. Here's how to install it.

Installing Sass Lint

  npm install sass-lint --save-dev

Adding a Lint Config File

For sass-lint, it will hook into by default a file that is in the root of folder called .sass-lint.yml. It's quite long, and you can see the rest of the file in the actual github repo. However, you will still need to create a sass-lint.yml file.

touch sass-lint.yml

Inside of the sass-lint.yml file, it will look something like this:

options:formatter: stylish
files:include:- '{apps,libs}/**/*.scss'ignore:- 'libs/font-awesome/**/*.scss'rules:# Extendsextends-before-mixins: 1extends-before-declarations: 1placeholder-in-extend: 1# Mixinsmixins-before-declarations: 1# Line Spacingone-declaration-per-line: 1empty-line-between-blocks: 1single-line-per-selector: 1# Disallowsno-attribute-selectors: 0no-color-hex: 0no-color-keywords: 1no-color-literals: 1no-combinators: 0no-css-comments: 1no-debug: 1

The list of lint rules is long but useful for every potential aspect of your project, helping you prevent potential future conflicts.

For example, my personal favorites are no color words, empty lines between blocks, and depth. These things make the code review process much easier because it is visually appealing and lighter to read.

When it comes to managing architecture, styling is a self managed process and linting takes away the manual parts of it.

Adding an NPM Script in your package.json

"lint-scss": "sass-lint -v -q",

The Final Touch

Adding the sass-lint npm script will tie up any loose ends before your pull request. This sits neatly on the CI/CD architecture, meaning that when you make a pull request for your GitHub repo, it will check and sure that there are no SASS linting errors. When a pull request is actually merged, pipeline runs as well to make sure that there are no errors.