Design and Development

Benefits of using SASS over Traditional CSS

By

Filed under: CSS, Web Development.

One of the buzz-words of web design today is CSS-Preprocessors. Many designers and developers are wondering if they should make the switch over to using a Pre-Processor like SASS instead of just plain CSS. Once you learn the power of SASS over CSS you will not only never look back, but you’ll wonder how you ever lived without it. In this article I will be sharing with you a few reasons that compelled me to make the switch over to using SASS for all my web design projects.

If you need resources on where to learn SASS see the bottom of the article for some links to great tutorials.

SASS vs. CSS

Fewer HTTP Requests by Using the @import Attribute

A few years back web experts were recommending that you separate your css files into separate files based on the content i.e. fonts, colors, grids etc. One of the problems with this approach is that you will have a huge number of HTTP requests on your website, which will slow down the load time of your website. However, because SASS uses a Ruby complier we are able to break up our stylesheets into multiple files and then have one “style.scss” that “@import”s all the various other stylesheets when it is complied.

Some suggestions for breaking up your stylesheets in order to keep them more organized are: grids, normalize reset, mixins, style (main stylesheet with @imports), IE stylesheet, responsive breakpoints stylesheets (i.e. mobile, 481up, 768up, 900up, 1030up, 1240up), and fonts.

Keep Your Responsive Design Project More Organized

One of the amazing things about SASS that we learned earlier is that with @imports you can break your stylesheets into meaning separate sheets. This allows us to individualize all our stylesheets for each of the different devices we are targeting. I always start with a mobile “base.scss” stylesheet first, which allows for all sorts of benefits explained in this article. After that, we simply @import each of the different stylesheets via @media-queries that target devices and browser sizes based on the width of the viewport.

Because the styles are broken up into their stylesheet with an approiate name i.e. 768up.scss or iPad-vertical.scss we can easily organize and keep tabs on all our different styles for the different device sizes.

Here is an example of what my style.scss file looks like:

<pre>

AVERAGE VIEWING SIZE
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here’s where
you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 481px) {

/* styles in 481up.scss */
@import “481up”;

} /* end of media query */

/******************************************************************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here’s where
you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 768px) {

/* styles in 768up.scss */
@import “768up”;

} /* end of media query */

/******************************************************************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here’s where
you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 900px) {

/* styles in 1030up.scss */
@import “900up”;

} /* end of media query */
@media only screen and (min-width: 1030px) {

/* styles in 1030up.scss */
@import “1030up”;

} /* end of media query */

/******************************************************************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
******************************************************************/
@media only screen and (min-width: 1240px) {

/* styles in 1240up.scss */
@import “1240up”;

} /* end of media query */

</pre>

Reusable Color Scheming

Another benefit of SASS is that it allows us to define variables that are reusable throughout our entire project. This provides a huge benefit when working with things like colors and fixed width sizes. Let’s take the example of color scheming for a minute and look at the traditional CSS vs. the new and improved SASS workflow.

In plain CSS you may declare your body to have a background of #CCC. Of course your footer text color may be #CCC, along with your border around images, as well as the highlight background of any links that are clicked. So in your CSS stylesheet you may declare background: #CCC; and color: #CCC twenty or thirty times throughout your project. What happens if your client comes back and would like the color changed to something a little lighter like #ededed? You would have to locate all the references to #CCC and change them to #ededed. What a hassle!

Enter a new and improved workflow with SASS. In SASS syntax you would simply declare a variable named $light-gray; Any time you needed to use the color #CCC, you would simply declare background: $light-gray. Very simple. In the future when you need to change the color to #ededed you simply go to that variable reference and change $light-gray to #ededed – one time instead of thirty times; what a time-saver!

Don’t Repeat Similar CSS Statements Throughout Your Project

Another feature of SASS that begins to utilize some of its power is the @extend attribute. With @extend you can include styles into other classes that belong to a base class. Ok, let me explain with an example.

Let’s say you are going to style 3 different images in the footer which will have most of the same styles with a slight modification. Well instead of writing .image1 { … styles } .image2 { …styles… } image3 { …styles… } SASS has a better way. With SASS you simply write .image { …main styles… } and then .image1 { @extend .image; specific styles … }. This can not only result in a huge time savings, but it keeps your code more organized as well.

Now, you can do something similar to this in CSS by listing the classes like .image1, .image2, .image3 but this way is sometimes so cumbersome I find that a lot of designers will simply type out the code again forgetting to use that technique. The SASS way is much easier and more update friendly.

Bonus: A Responsive HTML5 SASS-Based Framework

When you are designing websites you should never start from scratch on each new project. There are tons of things that remain the same no matter what type of project you are working on. That is why you simply must start with some sort of blank template to begin each project.

In my personal experience I started building WordPress websites on the Thematic Childtheme framework. However after working with the platform for several months I began to notice somethings that I didn’t appreciate about it i.e. lots of HTTP requests, 30 database requests per page, writing too much code in PHP verses straight HTML etc.

Recently I switched over to “BONES” by Themble.com. This Responsive HTML5 starter framework includes everything you need to get started on a web project without all the bloat of many other frameworks. One things that I really appreciate about this framework is that it incorporates many of the things I talked about earlier like breaking the stylesheets into responsive width breaks and creating the design with a mobile-first approach. Head over to http://themble.com/bones/ to try out this amazing framework today!

I'm sorry, but comments are closed for this post.