Speeding Up Frontend Development Workflows With SASS

What is SASS?

SASS (Syntactically Awesome Stylesheets) is the web’s most popular CSS preprocessing framework. Unlike typical stylesheets, SASS files is not directly readable by web browsers (yet), but it is much developer friendly. Once a SASS file is saved it is then compiled to plain CSS so long as the compiler is installed and ran. With SASS you can use features that CSS doesn’t have yet, like variables, nesting and mixins that make building complex stylesheets easy and efficient. SASS is considered a superset of CSS (similar to how C++ is a superset of the C language) which means that any valid CSS is also valid SASS.

Installing SASS

Technically speaking, SASS is a Ruby Gem. A Gem is a library of code that extends the Ruby language adding new functionality. Don’t worry, to use SASS you do not need to know ruby, that is simply the code that the compiler is written in. If you are a die-hard command line lover (and you have ruby installed) simply type in gem install sass. For those who don’t like to do things through the command line, you’re in luck! There are plenty of programs available across all platforms that will get the job done much more efficiently (and automatically).

CodeKit ($28+ Mac Only)

Hands down, CodeKit is the best program available available for SASS and so much more. If the price tag scares you, don’t worry, CodeKit comes with a 10 day free trial where you can decide for yourself whether it’s worth it. Out of the box, CodeKit has support for popular front-end development tools such as SASS, Compass, Bourbon, CoffeeScript, Image Optimization (lossless compression), LiveReload and so much more. If you are developing on a Mac, this is the app for you.

Compass.app ($10 – Mac, PC & Linux)

If you would rather something that is more cross-OS compatible, Compass.app is your next-best choice. With a little bit of setup, Compass.app can support LiveReload (through Guard-Livereload and browser extensions).

If none of these apps work for you, here are some other ones to try out:

• Scout (Free – Windows & Mac)
• LiveReload ($9.99 for Mac, Free for Windows but it’s an Alpha program)
• Prepros Pro ($24 – Mac & Windows, also a free version)

Starting Your own SASS Project

Now that you have SASS installed, its time to start coding. The first thing to do is to start the project which is done differently for each program, please refer to the programs documentation or installation instructions on how to do that. Once you have added a project, you have to decide whether to use sass or scss syntax. The main difference is scss uses css-like punctuation (curly braces, colons and semicolons), while sass syntax does not. Personally, I use scss syntax as it’s what I’m used to. You can use .sass and .scss extensions respectively for each syntax:

Variables

With SASS, you can easily use variables. This allows you to set default colors and sizes once and reuse them throughout your entire stylesheet. Variables are typically used for things like colors, fonts, and other common attributes:

Nesting

Nesting is one of the most intuitive features of SASS. It allows you to enclose selectors within other selectors to reduce the need to repeat tags. As you will start using SASS more and more, you will find yourself using nesting all the time. Not only does nesting rules make your code more efficient, it also makes your stylesheet more organized by organizing similar rules together.

[code type=”css” title=”nesting.scss”]nav ul {
display: block;
li {
list-style: none;
a:link {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}[/code]

[code type=”css” title=”nesting.css”]nav ul {
display: block;
}
nav ul li {
list-style: none;
}
nav ul li a:link {
text-decoration: none;
}
nav ul li a:link:hover {
text-decoration: underline;
}[/code]

Mixins

Mixins is one of the most powerful features of SASS. CSS can be a bit tedious to write at times, especially when used for things like browser prefixes and other large chunks of code. Mixins are meant to alleviate some of the hassle by allowing you to declare reusable snippets of code and pass in values for that later. This mixin shown makes browser prefixes much easier, but there are mixins for just about everything from responsive grids to clearfix and box-sizing.
[code type=”css” title=”mixins.scss”]@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}

.button { @include border-radius(15px); }[/code]

[code type=”css” title=”mixins.css” linenums=”show”].button {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}[/code]
If you are interested in learning more about mixins, check out the Bourbon library which includes a ton of the most popular SASS mixins.

Conclusion

Congratulations, you now know the basics of SASS. Now it is time to start implementing it into your everyday workflow and see how you can save time and write better code with this robust, easy to use tool. Stay tuned for more articles where we will cover things like the Compass Framework, partials, extended inheritance, and operators.