Skip to main content

5 pro Sass tips for better CSS

Sass CSS
(Image credit: Sass)

Unbelievably it is over thirteen years since the CSS preprocessor Sass was released. Since then it has grown to be one of the best-known and best-loved CSS tools in a developer's toolkit – see our post on What is Sass (opens in new tab) to learn more.

Here, Natalie Weizenbaum, lead designer at Sass, tech lead of CSS at Google and closing keynote speaker at Generate CSS (opens in new tab) reveals her top five tips for getting the most from Sass. 

01. Use Sass for sharing styles

Sass has a lot of nice features for writing individual stylesheets, but where it really shines is that it creates a consistent visual identity by encapsulating design logic in functions and mixins, and re-uses them over and over. That's why design systems like Google's Material Design and IBM's Carbon use Sass!

02. Use PostCSS for transforming styles 

Six years ago, it was common to see Sass users using mixins for cross-browser compatibility or right-to-left language support. Today, PostCSS is the best tool for that job. Let humans write standards-compliant Sass stylesheets and leave the compatibility work up to the machines.

03. Use mixins for all styles in partials

Even if those mixins are only used once! Only the root Sass file should actually produce CSS. This ensures you know exactly what order your CSS is generated in, and it makes it way easier to share styles later if they're written to be shared from the start.

04. Keep your styles neat and clean with a linter

The stylelint linter provides a ton of excellent lints that will help ensure you aren't using any invalid CSS properties or other easy mistakes. The stylelint-scss plugin adds a bunch of checks just for Sass users, some written by the Sass team itself.

05. Give Dart Sass a try

First released in 2018, Dart Sass is the new reference implementation for Sass. It's fast, it's easy to install as a pure JavaScript package, and it's rapidly developed—which means it's always the first implementation to support new Sass features and new CSS syntax. 

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(Image credit: Future)
(opens in new tab)

Check out Weizenbaum's talk on Sass in a Post-CSS world (opens in new tab) at Generate CSS this September. Buy a ticket to Generate CSS today (opens in new tab).

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

Steven Jenkins is a freelance content creator who has worked in the creative industry for over 20 years. The web and design are in his blood. He started out as a web designer before becoming the editor of Web Designer magazine and later net magazine. Loud guitars, AFC Bournemouth, Photoshop, CSS, and trying to save the world take up the rest of this time.