The Power of Sass

Sass, or Syntactically Awesome Stylesheets is an extremely powerful CSS pre-processor language.

Here at Enovate, we use Sass for all our web projects, as the time taken to develop with Sass, and the sheer power of the language make it a very desirable extension to CSS. We would recommend switching your project styling to Sass based development, but if you are still sitting on the fence, here are some of the best features that we feel help Sass live up to its name.

Perhaps one of the best features of Sass is the ability to nest CSS selectors within their respective parent element. A huge pain when writing in pure CSS was that a lot of your code was repeated; for each selector you would have to re-declare all of the parent classes and ID’s before you could even begin to develop the styling.

Let's compare some basic styling for a primary navigation, and see how the same effect can be achieved in both Sass and plain CSS.

Here is what we could write in CSS:

As you can see we have a lot of repeated code; each time we have had to use the .nav--primary selector before we can begin to make our declarations. So lets see what the same code would look like when using Sass:

We have opened (line 1) and closed (line 23) .nav--primary, so now all the styles contained within this parent will only apply to it and its child elements.

Sass is extremely useful at reducing the time it takes to style your websites, and also helps to maintain a strict consistency with your website elements. Pre-defined variables can be injected into your page, so in the event something needs to change, a site-wide update can be achieved with editing a single line of code. Think of variables as a way of storing a piece of information that can easily be changed and can be used throughout the site.

Here is a good example of a variable in use. The variable name and corresponding styles are defined:

And then used as a variable in your styling:

So if we were to change the brand-face from Open Sans to another font, we would only need to change the code where the variable has been defined; long gone are the days of search and replace!

Although this is only a small example of the true power of Sass variables, it helps to demonstrate how effective using variables can be, instead of writing your declarations each and every time.

Cross-browser compatibility is a fundamental part of all development projects, although defining browser prefixes each and every time can be a very tedious task … but not anymore. Mixins allow you to create a set of CSS declarations for all browsers, that only need to be written with one line of Sass in your stylesheet.

For this example, here is a basic mixin for defining a border radius:

Now, when we need to add a border radius to an element, we simply need to write:

And the generated CSS will look like this:

With Sass you are able to perform mathematical calculations right in your CSS documents. You are able to add, subtract, multiply, divide and calculate percentages. This extremely powerful feature is useful when maintaining a vertical rhythm through your site.

Here is a good example of Sass calculations in action, and how they can be used with variables. For this example, we are working on a 24px vertical rhythm, which we have defined with a $base-spacing-unit variable:

Hopefully you can see that using Sass for your next project could bring a whole new world of opportunity. Although I have barely touched the surface of what Sass can achieve, the advantages mentioned here clearly out-weigh the disadvantages of using Sass over raw CSS.

If you've been persuaded to give it a go for your next project, good! Check out the Sass site for details and documentation.