Top 5 Sass mistakes

Top Sass mistakes

Sass: the powerful professional grade CSS extension language is a popular tool. But are you using it properly? Here, we share some common Sass pitfalls and how to avoid them.

01. Nesting too deep

While it's tempting to translate your nested HTML structure to Sass, it creates overly specific selectors that will hurt you in the long run. As per the 'inception rule': don’t nest more than four levels deep.

02. Using mixins instead of extend

If you find yourself using mixins that don't take arguments or a @content block, you're adding code bloat to your CSS. You will be repeating code in your compiled CSS. As a rule of thumb, use the @extend directive when there's nothing dynamic about your mixin.

03. Always using vendor prefixed mixins

One of the great things about the Sass ecosystem is the large number of frameworks and extensions – for instance those designed to help with CSS3 vendor prefixed properties. Don't resort to these by default though: the border-radius property for instance hasn't needed prefixing for a while, so don't bloat your code by continuing to use a mixin for this.

04. Committing CSS files to version control

Commit your source files, which in case of Sass means your .sass or .scss files, and not your compiled .css files. It will only tempt others to make changes in the wrong files, and having those changes overwritten later.

05. Not petting a kitten

Sass is licensed under the MIT License, which makes petting a kitten more a suggestion than an actual requirement. The same goes for paying Catlin a compliment or buying Weizenbaum some jelly beans, although they would appreciate it. Seriously, it's in the author’s section of the ReadMe.

Words: Roy Tomeij

Roy Tomeij is a Dutch frontend architect, Sass evangelist, trainer and speaker. He's writing a course about "turning Sass up to eleven" at This article originally appeared in net magazine issue 257.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.