SCSS-Linter

For a long time we hadn't linted anything at Healthify, mainly because I had never found a linter I liked. Along came scss-lint!

Scss-lint proved to be highly configurable and easily implemented though there were a few quirks. First off, our app and the gem don't agree on versions for some dependencies which prevented us from just loading it into our Gemfile. Instead, we are using it as a CLI tool essentially for checking our work every so often.

To get started you need to install the gem:

$ gem install scss-lint

Then you will want to set up your config file at ./config/scss-lint.yml. Start with the default one they provide, but then you can start to customize it yourself. The most important change was adding a key called exclude to avoid linting any vendor files that you aren't really in control of. For us, that looked something like:

# Note: this is NOT a 'linter' and should be the top
#       level key just above your linters key.
exclude: '../app/assets/stylesheets/vendors/**'  
...
linters:  
...

From there, it should be easy to tweak the linter configurations you want. All of them should be listed here.

Lastly, to run the linter you just go to the command line and execute the following:

$ scss-lint -c CONFIG_FILE STYLESHEET_DIRECTORY

...in our case...

$ scss-lint -c config/scss-lint.yml app/assets/stylesheets/

In any situation where you're facing an issue, like trying to build for IE8 and you have a weird line that has to be in not alphabetical order.... you can exclude a particular file from a particular linter. In our case that looked like this:

linters:  
  ...
  PropertySortOrder:
    exclude:
      - '../app/assets/stylesheets/shared/_header.scss'
    enabled: true
    ignore_unspecified: false

Hopefully I'll get to write something on the specific rules we decided to maintain/change in our linter configuration, but this is long enough already.

Happy linting!