How I tripled my CSS writing speed and had fun doing it

Unless you’ve been living under a rock, you’ve probably heard about Sass (or less) before.

You might have some vague idea about what it is or what it does…but the true benefit of using a CSS preprocessor has been lost on you thus far.

What is Sass really, and how can using a CSS preprocessor actually help you in your day-to-day development work? That’s exactly what I’m going to explain to you in this post. 🙂

What is Sass?

According to sass-lang.com, Sass is “CSS with superpowers.” Sounds cool, right?

In more formal terms, Sass is a CSS preprocessor, or a CSS extension language. Essentially, it adds “missing features” to CSS to make writing stylesheets easier and more enjoyable.

How does it work, though?

You write Sass first, then run it through a compiler that transforms your code into plain CSS, allowing you to use those generated stylesheets in your web designs.

Don’t think you have to learn an entirely new language to get started with Sass, though: it’s fully compatible with CSS, so you can actually write plan CSS in your Sass files and it’s 100% valid. But once you learn about all of Sass’ useful features, you’ll want to make use of them, I promise! ?

How can Sass help your development workflow?

Greatly increases speed of writing stylesheets – I’m absolutely not kidding when I say that using Sass helps me write CSS at least three times as fast as I used to.
Helps you write more semantic styles – Because of some of the features included in Sass—namely extend—writing more semantic styles becomes easier.
Makes your build process quicker/easier – When combined with a task runner, Sass can cut steps out of your website build process that you’d normally do manually. Think CSS prefixing, combining & minifying files, image compression & more.

Still skeptical about how helpful Sass is? Here’s one of my developer friends has to say about adding Sass to her process:

“Sass is such a powerful tool that I wish I would have started using way earlier for my development projects. It’s amazing how much faster projects go when you don’t have to lookup and rewrite the same hex codes repeatedly, can have variables saved for your commonly used breakpoints, and save valuable key strokes when trying to target different HTML elements within a section on a page!” – Krista Miller of Krista Rae

Convinced yet?

Most useful Sass features

Variables – If you’re familiar with any “traditional” programming languages, you already know what a variable is, but if not, think of it like a shortcut to a piece of information. Some of my favorite ways to take advantage of variables in Sass are for colors, font-families, and border styles. Imagine only having to write the hex code for a color once for an entire project! Sass makes that possible.

Nesting – Do you ever get tired of having to type out long selectors in CSS? It seems like such a waste of time to have to type and re-type (or copy and paste) very specific selectors many times in your stylesheets. With Sass, you can say goodbye to the hassle of typing out those ultra-specific selectors time and time again!

Extend – Extend allows you to apply the rules from one class to another class, helping to keep your HTML and CSS more semantic and reducing the need to add a laundry-list of classes to an element to make sure it’s styled appropriately.

Imports & partials – In Sass, when you @import another file, the compiler will pull the content of that file into the file that is importing it. Instead of telling the browser to go fetch the imported file, Sass does it while compiling to CSS, saving precious HTTP requests and reducing your page load speed. Sass also makes use of something called a partial to go along with the import directive. Partials are little snippets of Sass in their own files that are meant to be included in another Sass file. Partials help you keep your styles compartmentalized for easier maintenance.

Operators – Before the calc() function in CSS had much browser support, Sass made doing math in your stylesheets easy. Sass supports several mathematical operators—+,-,*,/,%—to help you calculate measurements in your styles. And, now that browser support for CSS’ calc() function is so widespread, you can combine it with useful features of Sass (like variables) for even more power.

Mixins – Do you find yourself writing the same group of styles over and over again in a project? Instead of typing out the same rules time and time again, you can use a mixin to do the heavy lifting for you. If you’re familiar with functions or methods from other programming languages, mixins are very similar.

More Sass resources

Official Sass guide: http://sass-lang.com/guide
Sass language specifications: https://github.com/sass/language
Sass vs less: https://css-tricks.com/sass-vs-less/
Top tutorials for learning Sass/SCSS: https://medium.com/quick-code/top-tutorials-to-learn-sass-and-scss-33e4dcd63e9b

Sass makes writing CSS fun again! It’s easy to write better styles faster than ever with it in your toolbelt, so if you aren’t using it already, make learning it a priority.

Is there anything holding you back from using Sass in your development projects? Let me know in the comments below!