How to lint your Sass (scss) in Sublime Text

Linting your Sass is a great way to ensure some degree of code quality. At the very least you will have greater stylistic consistency.

One thing before we get started: be careful not to blindly follow what a linter says, though: treat linter rules as guidelines, not absolutes .

In my text editor of choice, Sublime Text 3, the best way to get linting in any language is currently using the Sublime Linter package. Once that is installed, you can install extension packages for each language you want to lint.

In my case, the main ones are Sass (as .scss), JavaScript and JSON. We’re going to focus on Sass here.

Read MoreLeave a comment

Sass’s trailing ampersand and modular code

I recently learned of a feature of Sass that I think is extremely powerful, and little known about. I’m not even sure if it has a proper name*, so I’ll make one up and call it the “insert parent selector”. And it can help you deal with exceptions or variations that might make otherwise modular code become unruly.

And all it comes down to is a trailing ampersand – “&”.

Read MoreLeave a comment

SASS, Livereload and Chrome Dev Tool crashes

I’ve been experiencing a bizarre behavior when using:

  • SASS/SCSS
  • Livereload (either via the app or a command line utility like Grunt)
  • Google Chrome
  • Having Google Chrome Dev Tools open

Where, every time I make a change to an .scss file, and Chrome Dev Tools are open in the relevant window – it will crash when Livereload attempts to update the page.

Aw Snap! Error when using Livereload and Chrome Dev Tools

Read More2 Comments