Gettin’ Sass-y with CSS

Cascading Style Sheets came into the world 19 years ago, which is coincidentally about the time I realized I could build my own websites and put them online. Since my formative years were largely dedicated to messing around on the internet, I put in a lot of practice writing CSS in junior high and high school. Like, a lot of practice. However–still, to this very day, when I write CSS and need to figure out why something doesn’t work, it often ends with my banging my head into the desk and reminding myself that “they’re called Cascading Style Sheets because they cascade.”

Here’s what’s up: the CSS I’ve been writing hasn’t really been much different than the CSS I was writing in high school. Sure, I knew of the existance of those fancy extensions/preprocessors, but I wasn’t about to actually use them. It’s just CSS. How fancy does it need to get?

Well, I was working on my little group management app, CoLeadr–remember that? And as I was writing up the CSS for the main dashboard view, it occurred to me that it would, in fact, be really awesome if I could use variables in my stylesheet. I tend to develop in black and white and add a color scheme in later, and I was starting to see that particular stylesheet becoming a pain in the butt. So I decided to check out a CSS preprocessor.

I chose Sass (Syntactically Awesome Stylesheets), for the very grown-up and professional reason that “sass” sounds a lot more fun than “less”. So I typed “sass” into Google, and Google knew exactly what I meant because Google is magic. One line in the terminal later, and I was up and running.

There’s actually two different types of Sass file: the original indented syntax .sass, and the more recent .scss, which is similar to CSS. Both get interpreted to CSS with a simple terminal command, or you can set it up to watch individual files or entire directories for changes, and Sass will automagically interpret to CSS whenever there’s an update. I’ve been writing .scss, so I don’t have to teach myself very many new syntactical tricks. I also keep a terminal window open specifically for being able to repeat this command:

toribrenneison$ sass sass/marketing_sassy.scss marketing.css

Using variables is super easy. Sass recognizes colors, numbers, booleans and strings as variable values. Variables are declared with a dollar sign (or–someone introduced me to this and I have been in love with it since–a bling) at the start of your Sass file, and can then be used anywhere in the rest of the file. When the file is processed to CSS, Sass will fill in the variable values for whatever CSS is being compiled, so this:

$body-background-color: #ffffff;
body { background-color: $body-background-color; }

Turns into this:

body { background-color: #ffffff; }

You can see how that would make a massive CSS file a lot more manageable when it comes to changing the values for things like colors, margins/padding, borders, and the like. Speaking of massive CSS files, Sass has some handy methods for splitting your Sass into manageable chunks. A partial Sass file _starts _with _an _underscore, and although they’re not generated into CSS files with the same magic, Sass was also kind enough to give us an @import command to bring those partials in and add them to the CSS file it compiles.

Sass also gives us mixins, which are like reuseable chunks of code. Let’s snag the example from Sass’s own website and say, for example, that you want to declare a border-radius value that will appear in several different places. Since it’s best practice to declare styles with several vendor prefixes (Google webkit, Mozilla, Microsoft, Opera) so that your code has the best chance of working in all browsers, typing can get tedious pretty quickly. With a Sass mixin, you can declare once (their example uses a variable for good measure):

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

And use it anywhere:

.box { @include border-radius(10px); }

Which compiles to:

.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

Something else that is totally amazing about Sass? Inheritance. Sass will let you nest your declarations, although you should beware of going too deep, which will lead to over-qualified CSS (I’m looking at you, Bootstrap). So you can nest a declaration for a line item or a link inside of the declaration for your navigation class, which keeps the Sass file easy to read. Straight-up inheritance also works: just use the @extend command, and you’ll be able to add on to already-existing declarations. To once again steal from Sass’s website, you can build “success” and “error” off of an existing “message” class:

.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}

Will turn into:

.message, .success, .error {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}

Sass will also do some math for you, but since I’m terrible at math, I’ve left that alone. I like to use a grid system like Bootstrap/Foundation/Skeleton to do my layouts, so I don’t really need Sass to do crazy layout calculations for me, anyway–I can see the value in it, of course, but it’s not something I’m ready to try and use myself.

Would I recommend Sass to a friend? I certainly would, and I’m doing it right now. Perhaps, at some point, I’ll try and play around with Less. But for now, I’m getting Sass-y, and loving it.

You can find documentation and read more about Sass by visiting the official website: sass-lang.com.