Why should I use SASS?

 Problem:

Being a web developer one often hits that momentous stumbling block, of though being able to knit code together amazingly, that the “code’s face”, the actual UI is not quite what as “beautiful” as it’s internal structure. Perhaps a reason for this is not a lack of creativity, but rather a syntax that is “sour, leaving a bitter taste” in ones mouth – and that of CSS. Sometimes it’s not that the developer lacks “design skills”, but that he or she fails to come to terms with a language that’s “crude and difficult to read”. 

It’s kind of like an “artist” who has a palette with “two colors”, and the result of every painting is a boring stale end-result that is repeated over and over. However, if the “artist” is then informed, that he/she has an array of colors, as they find or choose to be necessary; then what can be created is truly marvelous!

My point – CSS for new developers can take a while to understand, grasp or even stomach, and in steps SASS (Syntactically Awesome Style Sheets). This then, is that introduction to something sweet that can help make your “web development” experience more pleasurable and less painful (easy to maintain, and less repeatable).

 

SASS

What Is SASS?

SASS friend, is simply a framework or rather a set of tools for allowing developers to leverage CSS in a manner that is more logical, and as “Rails developers like to say”, more DRY (Don’t Repeat Yourself).

Why use SASS?

Why use SASS? Now a Google will return lots of results and I mean there are so many frameworks out there, unless referred to by a colleague etc; you almost pass it by, thinking it’s just another “web” technology among the myriad. So to address that I would like to just cover 3 of Top “PRO’s” of SASS, that can bring immediate improvement to your “development time and experience” and perhaps persuade you to use it.

Variables

In developing any web site, I like to stick to 3 colors at a maximum to predominantly decide the look and feel or the UI. Often times, I find myself hunting down shades of one primary color, like blue, light-blue etc (or rather their HEX Values).

The beauty of SASS, is that we have Variables, yes, actual “Variables”, so you can do something like:

 $gray-Dark: #474546;

So now, when I need to reference that, let’s say for a 


header {
 background-color: $gray-Dark;
}

footer {
 margin-top: 30px;
 padding-top: 5px;
 border-top: 1px solid $gray-Dark;
 background-color: $gray-Light;
}

The power behind this of course, is now you have one reference point for changing a color as opposed to rippling through multiple CSS or a large CSS to change the color for all accompanying tags. Also a great plus, for quick “mockups”.

But let’s say, however, I wanted to make my footer slightly lighter as a variant of Gray. I could define a new variable, as such:


$gray-Light: lighten($gray-Dark, 20%);

footer {
 margin-top: 30px;
 padding-top: 5px;
 border-top: 1px solid $gray-Dark;
 background-color: $gray-Light;
}

There are a myriad of other functions, and you should check that out (like “darken”, “lightness” etc).

Nesting:

Now traditionally with CSS you would do the follow to NEST;


#header {
 background-color: $gray-Dark;
}

#header h1 {
 float: left;
}

With SASS, ‘nesting’ is much sweeter; we can NEST directly inside the target (class).


#header {
 background-color: $gray-Dark;

h1 {
 float: left;
 }

}

Functions:

Would you believe it, yes, your own functions. Now I cannot express enough the power behind this, but let’s use an example to give you some idea.


#header {
 background-color: $gray-Dark;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;

h1 {
 float: left;
 }
}

#nav-left {
 padding: 5px 12px;
 margin: 10px 0;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

#footer {
 border: solid 1px $gray-Dark
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

Now as you can see the border-radius is repeated 3 times. A change to one would require me to meticulously make changes to all three. But that’s a bit cumbersome not to mention extra code, extending the size of my file, and decreasing readability. With SASS, I can instead rip out this ‘CSS’ and create a seperate function for this which I can address in all 3 places.

At the head of my file, where my variables are declared; we add in our Function, or as SASS calls it, MIXIN.


@mixin <name> {

// CODE TO REPEAT
}

@mixin rounded-corners {
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

And it’s implementation like this:


#header {
 background-color: $gray-Dark;
 @include rounded-corners

h1 {
 float: left;
 }
}

#nav-left {
 padding: 5px 12px;
 margin: 10px 0;
 @include rounded-corners
}

#footer {
 border: solid 1px $gray-Dark
 @include rounded-corners
}

But let’s say, the rounded corners are different for #nav-left – instead of 10px for the border-radius it should be 8px. How can SASS help us?

Well a “function” (mixin) is not a true function unless we can also provide “parameters” or “arguments”. So let’s modify our MIXIN a little to support custom radii.

That is:


@mixin rounded-corners($radius) {
 border-radius: $radius;
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
}

But before we implement, how about a default, in places were the MIXIN is used, but no radius is specified;


@mixin rounded-corners($radius: 8px) {
 border-radius: $radius;
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
}

Beautiful isn’t it, but let’s look at our implementation, which if you being any sort of developer should already have in your mind:


#header {
 background-color: $gray-Dark;
 @include rounded-corners(10px);

h1 {
 float: left;
 }
}

#nav-left {
 padding: 5px 12px;
 margin: 10px 0;
 @include rounded-corners(8px);
}

#footer {
 border: solid 1px $gray-Dark
 @include rounded-corners(10px);
}

But the programmability doesn’t end there, and again, so not to overload you with information, but to give you an understanding of it’s power; SASS also supports Conditional States (if, else if, else); as well as “For” loops and “For Each”.

Conclusion:

This is just the tip of the iceberg of SASS, and if you would like to learn more, you can visit the following links:

  1. SASS Website
  2. SASS Functions
  3. Beginner Tutorial on SASS
  4. Advanced Tutorial on SASS
Don't be shellfish...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrEmail this to someone

Leave a Reply