The Benefits of Using Sass

Posted on by rosedesign

If you have been living under a rock for the past year, then you might have missed the industry flipping all the tables over one of the most revolutionary tools for web design, Sass ( Syntactically Awesome StyleSheets ).

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

– Sass Documentation

I know what you are thinking, “But learning new tools sucks”, and normally I would be thinking the same thing, but Sass has to be an exception. With our websites and applications becoming more and more complicated the larger and harder our stylesheets become to maintain and a preprocessor such as Sass can help keep our stylesheet concise while offering a whole new world worth of tools to utilize.

So, what might be some of these features?

  • Fully CSS-compatible
  • Language extensions such as variables,nesting, and mixins
  • Many useful functions for manipulating colors and other values
  • Advanced features like control directives for libraries
  • Well-formatted, customizable output

1. @import

I know I know, CSS already has an @import feature, but Sass utilizes it in a completely different way. Since Sass is preprocessor, instead of making multiple HTTP requests to pull in the other stylesheets, like css would do, Sass will pull in the stylesheets before it complies the css.

This drastically cuts down HTTP request, thus making the load time for your website significantly quicker. It also helps keep your workflow organized and easier for other designers to look at if needed.

 

2. Color functions

Oh my gosh, the color functions has to be one of the best benefits to using Sass, hands down. Being able to name a color variable then use it saves so much time, and helps organize all of my colors so that I can keep an amazing color scheme throughout the entire project. Here’s an example:

$color: #1b1b1b;

.myDiv {
   background-color: $color;
}

And that is how easy it is to use the color function, yet it has endless possibilities and will keep your workflow clean and simplified.

 

3. Nesting Content

Being able to nest tags within tags has been incredibly helpful by keeping all my tags organized, and overall just feels more natural to work with. If you do not know what I mean by nesting content, let me give an example.

.myDiv {
   p {
      color: $color;
   }
}

If you take a look at the code, you will see that the main tag is .myDiv. From there, I nest the p tag underneath it and add the color variable to the color option. With that, whatever p tag inside the .myDiv tag will change to #1b1b1b, and all other tags will remain untouched. This is extremely useful when trying to keep all of your tags organized and keeping css bloat to a minimal.

 

Overall, I think Sass is defiantly something worth checking out and giving it a try before throwing it to the side as a tool that you’ll never learn. There are plenty of other pre-compilers out there, such as less, but personally I find Sass to be one of the easiest to pick up, and has one of the strongest community backings.

 

References