Supercharge your CSS with SASS

01.31.2014

CSS is a pretty useful tool. It makes your markup look good and it can be used to do some really neat things. But, as we developers use it more and more, we tend to yearn for some more advanced features. Not being an actual programming language, you can't have some things that would be in one.

This is where SASS shines.

SASS is a CSS extension language that adds additional features that CSS does not have. It compiles down to CSS so browsers won't need to have any special plugins or processing to use it. It's meant to save time and introduce concepts inconceivable in a plain ol' stylesheet. Best of all SCSS (Sassy CSS) looks just like CSS; so if you know CSS, learning SASS won't take long at all.

Let's look at some time-saving features of SASS.

1. Variables

That's right, variables. It's a very common practice to have a common accent color that is applied to many elements in a layout. For example, let's say we have a key color #c6d600 and it's common to many elements. The code may look like this:

button {
    background: #c6d000;
    color:#333;

    border:0;
    border-radius:10px;

    padding:10px;
}

button:hover {
    background:#333;
    color:#c6d000;
}

That's great! But what if you wanted to change the accent colors, what do you do? You could find an replace every instance of a color but that can get pretty messy (and error prone). Let's try using a SASS variable.

$accent:    #c6d000;
$accent_black: #333;

button {
    background: $accent;
    color:$accent_black;

    border:0;
    border-radius:10px;

    padding:10px;
}

button:hover {
    background:$accent_black;
    color:$accent;
}

Much more manageable.

2. Mixins

I love me some CSS3. It makes things all pretty and animated-y. The one thing I don't lke is all those vendor prefixes that you need. And I know I can't remember the nuances of those rules to save my life. So that's where mixins come in handy.

They're essentially just macros that take in a parameter. Here's an example from the SASS guide:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
  -ms-border-radius: $radius;
   -o-border-radius: $radius;
      border-radius: $radius;
}

And here's how you'd use it:

.box { @include border-radius(10px); }

Finally, it spits out this:

.box {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
     border-radius: 10px;
}

3. Math

Be you. You're making a complicated layout that has relative measurements littered through out the stylesheet. First thought is you can use fractional units everywhere but that's until you realize widths of 33.33% * 3 can get pretty dicey especially when dealing with padding and margins.

Then you give up and move to pixels and find yourself hardcoding many of the values in, wishing you could just write just one third of this.

In SASS it's as simple as width: (1100 / 3);. And like you would expect, you would get width: 366px. You get the standard arsenal of +,-,*,/ and modulo but there's one thing I just absolutely adore: math on colors.

This works:

background-color: red - gray;

red - gray = #7f0000

And it comes in handy for prototyping and experimenting, especially when playing with colors. It may take a bit of getting used to, but it's worth it to be able to use this powerful tool. Here are some handy formulas:

Make brighter (add gray)

#c6d600 + #aaaaaa = #ffffaa

Make darker (subtract gray)

#c6d600 - #333333 = #93a300

Subtract green

#c6d600 - #00FF00 = #c60000

And there's a lot more

SASS a quite more more to offer like functions, style inheritance and class nesting where you can do some powerful organization of your styles.

It's available for Windows, OS X and Linux so you'll be able to incorporate SASS in to your development workflow.

sharing link :
category : Development