Why should I use SASS?

Introduction

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).

Background

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.

SASS Installation

Sadly SASS from the website provides no default installation for users of .NET. It assumes you are a Ruby user, and if so the installation is as simple as opening a can of beans.

That is:

gem install sass

If you are using Ruby on Rails, then this is the best way to integrate SASS,

gem install bootstrap-sass

For .NET users a different approach is required as you will have to use a plugin for Visual Studio:

Mindscape Web Workbench (18MB or so).

For Sass SCSS files, Web Workbench provides:

• Syntax highlighting
• Intellisense
• Warnings of syntax errors
• Warnings of unknown variables and mixins
• Go to variable or mixin definition
• CSS file generation
• CSS file minification - pro edition only.

Your CSS file will be generated in the same folder as the SCSS source, so your HTML pages can reference the CSS file at that location just as if you were writing the CSS by hand.

Using the code

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:

 

 Collapse | Copy Code

$gray-Dark: #474546; 

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

 Collapse | Copy Code

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.

 Collapse | Copy Code

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

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

Notice the format, lighten(color, %change). So basically I've now taken the "dark gray" I was using and made it 20% lighter. That's really nifty! There are a myriad of other functions, and you should check that out (like “darken”, “lightness” etc). Go here.

Nesting:

Now traditionally with CSS you would do the follow to NEST; note the separation of #header from it's h1 which makes CSS files cumbersome and difficult to read.

 Collapse | Copy Code

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

#header h1 {
  float: left;
}

With SASS, ‘nesting’ is much sweeter; we can NEST directly inside the target (class). That is, "h1" whose parent is #header can now be nested directly inside, and thus much easier to read, follow and make modifications to.

 Collapse | Copy Code

#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.

 Collapse | Copy Code

#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.

 Collapse | Copy Code

@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:

 Collapse | Copy Code

#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:

 Collapse | Copy Code

@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;

 Collapse | Copy Code

@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:

 Collapse | Copy Code

#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”.

Points of Interest

Another possibility you may want to consider, which makes the web authoring process all the easier, and uses SASS itself, is a neat little project called COMPASS. Basically this is an advanced set of functions (mixins) that are battle-tested, which can further improve your development cycle. Another way of thinking about it, is an Add-On that leverages SASS to be even more powerful.

Because this is what is known as "pre-processing", you don't want to keep updating your CSS to reflect your changes, and thereto comes the beauty of COMPASS, which has a "watch" feature which picks up changes to your SASS files and automatically processes them.

Cool, no!

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