5 reasons you should be using Sass today

By now I’m sure you’ve heard of Sass and how “You really need to start using it!”

Learning a new tool can suck and finding the time to do so is next to impossible but sometimes a tool comes along that changes our industry and is too good to ignore.

As our web pages and apps get more complex our style sheets get larger and harder to maintain. CSS preprocessors like Sass help by keeping our style sheets concise and allowing us to modularize our code while offering a whole slew of features not yet available in regular CSS.

These extra features also make them really fun to use! Now you may have seen something that looks like this:

$i: 6;
@while $i > 0 {
 .item-#{$i} { width: 2em * $i; }
 $i: $i - 2;
}

// http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11 

and thought, “Whatttttttttttt? Thanks but I’ll keep my regular ol’ CSS.”

I admit, it looks daunting and some people are doing some really crazy, complex stuff with Sass but I’m here to tell you that anyone can start using it and the gains you get on day one will make you a Sass believer.

Getting Sass set up for a project is a little beyond the scope of this article but installation is relatively easy and the Sass website has instructions for Linux, Mac or PC. The cool thing is, once it’s installed, you can take any CSS file you have and rename it .scss making it it a Sass file.

All properly formatted CSS is valid Sass!

This means you can start using Sass while continuing to write your styles as you always have, slowly incorporating more features as your comfort level grows. That’s right folks, just the same ol’. same ol’ but here are five awesome gains you now have at your disposal:

1. Variables

What is that main header color again? How do I write that font-stack? How many times have you been writing CSS and had to search through your previous styles for a value or had to break out the color dropper, yet again, to find out that hexadecimal color?

Sass provides variables as a way to store information that you want to reuse throughout your style sheet. Now you can store that color value or long font stack as something easy to remember. The way you declare a variable is with a dollar sign $ followed by the name. This name can be whatever you want it to be. Then you type a colon : followed by the value and a semi-colon ;:

$mainFont: "Helvetica Neue", Arial, sans-serif;
$mainColor: #CC6699;

Now if you want to use one of these values you can just use the variable instead.

.mySelector { font-family: $mainFont; color: $mainColor; }

Awesome, right? This one feature alone, makes it worth the install as it saves so much time when authoring CSS. It’s so great that it will probably make its way into the CSS spec but who knows when we will be able to use it? Lucky for us, with Sass, we don’t have to wait.

2. @import

Now you might be saying to yourself “CSS has @import, it’s not that cool” and you would be right but the CSS and Sass versions differ in a significant way. In normal CSS @import pulls in other style sheets but it does this by making another HTTP request, something we usually want to avoid. For this reason you may not have even used @import before. Sass, on the other hand, is a preprocessor (emphasis on the pre) that will pull in that file before it compiles the CSS.

The result is one CSS page that is handled by one HTTP request. What this means is that you can break up your css into smaller, more maintainable chunks while still only serving one page to the browser. Need to fix the text on the button? No more skimming style sheets looking for the pertinent button styles. Just open up your button partial and make the changes.

What’s a partial? Just what they sound like. They are partial Sass files that contain little snippets of CSS that you can include in other Sass files. They are named by using a leading underscore followed by a name. _myFile.scss. The underscore lets Sass know that the file is only a partial file and that it should not be compiled into CSS. To import this partial you just have to add the @import to your file like so:

@import 'partials/myPartial';

So I am importing _myPartial.scss that is located in a folder named partials. You do not have to include the underscore or the file extension. Sass is smart enough to know which file you mean. The use of partials allows us a great way to modularize our code, making it more portable and easier to maintain.

3. Color functions

Sass brings functions along to the CSS party. I know not everyone is a programmer and the concept of a function may be a tad over your head but don’t worry, many add a ton of useful features while not being overly complicated. As far as colors, there are a several useful ones to manipulate them but three stand out as awesome, easy gains for people just getting started. Let’s look at how we use them.

//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)

The syntax is pretty straight forward. In the three functions above you see we have two arguments for each. The first is the color we want to manipulate. This can be a hexadecimal, RGB or any color format that is proper CSS. It can even be a variable. The second is the amount we want to modify that color by. Make 10% darker, Lighten by 5%, Set the alpha to 0.6. The result of this function is the value that is set in the compiled CSS. So down below you see our functions at work

//in parenthesis you can put any color value followed by the amount you want to modify it by.
//lighten(#000, 10%)
//darken(rgb(0,0,0), 25%)
//rgba(blue, 0.6)
//rgba($mainColor, 0.6)
//use case
$color: #333;//set color variable
.myButton {
 background-color: rgba($color, 0.8);
 color: lighten($color, 65%);
 border: 1px solid darken($color, 5%);
}
//this compiles to:
.myButton {
 background: rgba(51, 51, 51, 0.8);
 color: #d9d9d9;
 border: 1px solid #262626;
}

Hopefully you can already see how this could be useful. There are a dozen ways to utilize these three functions to add some pretty cool color contrast and they can be used anywhere a color value would normally go. These three are just the tip of the iceberg. There are plenty more color functions and many creativ ways they can be used.

4. Mixins

Some things in CSS are a bit tedious to write. Mixins make groups of CSS declarations that we can reuse throughout our site. CSS3 styles that require vendor prefixes are a perfect example of when to use a mixin. Instead of typing the same property over and over we write a mixin once then call that mixin anytime we want to use it. To declare a mixin we use the @mixin keyword. We then give it a name and apply our styles in between curly braces like so:
@mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Arguments can even be passed to the mixin to make it more flexible. To use our mixin we just use the @include keyword.

//declare mixin(now being passed an argument)
@mixin box-sizing($boxSize) {
 -webkit-box-sizing: $boxSize; 
 -moz-box-sizing: $boxSize; 
 box-sizing: $boxSize;
}

//use mixin
.mySelector {
 @include box-sizing(border-box);
}


//compiled to:
.mySelector {
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box;
}

As you see in the example above we call our mixin with the @include followed by the name of the mixin then any arguments inside parenthesis. Think of how much time this will save you. Why isn’t everybody using this?

5. @extend

These tools been great but I’ve saved the best for last. @extend is one of the most useful features that allows us to share a set of CSS properties from one selector to another. Think of a pair of buttons, like an accept and decline button on a modal window. Since they are both buttons they’ll probably share most of the same styling but the decline button will have a red background to make it stand out. With Sass we write the default styles for all buttons then “extend” these styles to the decline button where we would add the red background.

.button {
 background: rgba($color, .8);
 color: lighten($color, 65%);
 border: 1px solid darken($color, 5%);
 padding: 1em;
 display: block;
 max-width: 200px;
}
.button-decline {
 @extend .button;
 background: red;
}
//compiles to
.button, .button-decline {
 background: rgba(51, 51, 51, 0.8);
 color: #d9d9d9;
 border: 1px solid #262626;
 padding: 1em;
 display: block;
 max-width: 200px;
}
.button-decline {
 background: red;
}

Man, how awesome is it to not have to repeat yourself? Not only does this promote modularization of our styles but it reduces the risk of styles being off from button to button. This is a huge time save win! Multiply this for all of the styles of the site and we have a significantly reduced time frame for writing CSS.

Heck, with all the time we are saving maybe we could learn the more complex aspects of Sass.

Summation and further reading

I hope I have convinced you to give this amazing tool a shot and illustrated some features that could improve your productivity right away. The truth is I could write this article again tomorrow and have five more really neat features to share. It’s just that awesome! Sass (and other preprocessors) are here to stay so do yourself a favor and start using it. For those interested in finding out more check out these resources on twitter and the Web:

Twits:

• https://twitter.com/SassCSS
• https://twitter.com/SassBites
• https://twitter.com/TheSassWay
• https://twitter.com/HugoGiraudel
• https://twitter.com/guilh
• https://twitter.com/sflsass

Webs:

• http://sass-lang.com
• http://thesassway.com/

And if you’re in the South Florida Tri-county area come join us at the South Florida Sass Meetup.

David Conner

David Conner is a UI designer and front-end developer from Boca Raton, FL. He is passionate about the web and loves the openness of the community. Check him out on his site or follow him on twitter at@dave_conner to learn about the latest in web design and development.