Supercharge Your CSS with Sass
Imagine with me for a moment: You just finished designing your website. It took weeks to build, it has a slider bar, it has some nice script font that you spent 3 hours searching for, it has cool customized social media icons – and your CSS file is kind of… a mess. You changed things as you went, adding li elements here and classes there, you have some extra web fonts loading in there somewhere, and you didn’t necessarily comment out like you should have.
But look! Website! It’s actually online!
::forgets everything about CSS document::
Cut to two weeks later when your aunt who has a massive computer monitor calls to tell you that “Your new web page looks so great but the swirly words look boxy. Oh and the link color isn’t standing out enough.”
::Looks at undecipherable CSS file. Panics.::
If you’ve ever designed a website from scratch, you’ve probably been here before. Struggling to understand and attempt to update your own wonky CSS file is a specific variety of suffering. That’s where Sass comes in.
Sass is a CSS preprocessor that helps you write style sheets that are organized and efficient. Sass is designed for designers, and it exists to improve the process of designing, building, and updating websites, especially on teams. Built in 2006 by Hampton Catlin and Nathan Weizenbaum (and later Chris Eppstein too), Sass beat out other preprocessors on the scene (like LESS). Read more about that smackdown here.
Now, a preprocessor like Sass doesn’t replace CSS – it is an extension of CSS and a tool for designers and developers. In plainspeak? That means that even though you’ll write your styles in Sass, they’ll still end up like familiar old style.css files when your site is live.
With CSS alone, though, making changes (like the ones your aunt with a giant computer monitor suggested) can be tedious. You Ctrl+F to find every instance of the color #020202, for example, then copy/paste your new color in. But maybe you didn’t mark all your links in the same way…now what? Lots of time and frustration spent digging through your old CSS file, when you could be doing new projects.
And let’s not talk about working with a team or at a large company. Imagine working on someone else’s wonky CSS file, and finishing on your boss’s deadline. Talk about stressful.
Sass saves the day by giving CSS several new capabilities. In Sass, you can:
1. Store design elements in variables to make changes a thousand times easier.
So instead of putting in the hex value every time you use your brand color, you can just use the variable $brandColor, like so:
That means that when you need to change your brand color, you only do it ONCE – in the variable. That’s right: mountains of changes just became ONE CHANGE. o.O And you can use variables for anything you repeat: font families, colors, margins? You name it! No really…you name it.
2. Organize your styles with nesting for more visual appeal and less this:
.class .otherclass .whynot .haveanother ul li a
So something like this:
Can become this:
3. Stop writing the same thing over and over with mixins!
[And access libraries of mixins!]
In CSS, there are a lot of things you end up writing over and over again, like the clearfix, for example. Instead of rewriting code . To refer to JS and Ruby again, mixins are like functions. There are even libraries of mixins! (Yep, like jQuery.)
4. AND SO MANY MORE THINGS
(like @extends, loops, logic, and our old friend mathematics)
A couple things to know before you get started:
You’ll write your files in .sass or .scss. They have slightly different formats. Learn about those formats here.
Ready to dive in? These are my favorite resources for Sassy newbs: