Category: 

Topics: 

Feb
6

Save Time With SASS

It's Syntactically Awesome!

I've read over and over again that if you are not using SASS or LESS, you should be. There is certainly no argument there! What could possibly be better than Dynamic Stylesheets? I think the biggest reasons for CSS designers to avoid the change is simply comfort in what they know. SASS or LESS requires a bit of a difference in your workflow - but believe me, it is only for the better. 

The biggest reason that drowns out all arguments, in my opinion, is the fact that you can write your code in the same manner as your standard CSS. So even learning how to compile your syntax gives your workflow a bit of a bump, that won't compare to the time that you will save when you can nest your CSS elements and create reusable functions.

I have tested both LESS and SASS and have settled on SASS because it seems to give a bit more functionality (not a whole lot more, but still). And this is why I think SASS has settled on their "Syntactically Awesome" acronym. I found a nice comparison of LESS and SASS, if you would like to check it out for yourself.

I've found myself using SASS style coding, rather than the SCSS because it is simply faster. No open/closing brackets, and my editors start new lines for me automatically. I know the open/close is just a minor part of the coding, but once it is eliminated, coding seems a whole lot faster.

Then when you add the "mixins" it can cut down on a ton of repeatative work. This is particularly useful on CSS3 elements that may have multiple declarations of an attribute in order to ensure browser compatibility. Think about the Gradient Background. 

.button {
    background-color: #000000;
    background-image: -moz-linear-gradient(bottom, #000000, #ffffff); /* FF3.6 */
    background-image: -o-linear-gradient(bottom, #000000, #ffffff); /* Opera 11.10+ */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #ffffff)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#000000, #ffffff); /* Chrome 10+, Saf5.1+ */
    background-image: linear-gradient(bottom, #000000, #ffffff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#000000'); /* IE6?IE9 */
}

SASS uses an add-on called Compass which includes collections of pre-browser-tested bits of code that can be imported into your code. So instead of using all of the above code, you can do something like this:

@import "compass/css3"

.button
  @include background-image(linear-gradient(center top, #ffffff,#000000))

And if you want to pre-configure the colors of those graidents, as well as make a mixin that can be called anywhere you need these gradients (and perhaps some borders and hover states that make the complete button experience) you can do something like this:

@import "compass/css3"

$shine: #fffffff
$shade: #000000

@mixin button
  @include background-image(linear-gradient(center top, $shine,$shade))
  border: 1px solid $shade
  padding: 3px 10px
  &:hover
    @include background-image(linear-gradient(center top, $shade,$shine))

You would need to import this file, in order to use the mixin, but you could use this pre-determined style in any of your SASS files by using something like this (if your mixin was placed in a file called "_base.sass"):

@import "base"

.button
  @include button

Just imagine how many times you would have had to re-declare all of the pieces of this simple button. This is just a sample of what can be done, but any CSS coder should see the benefit of switching to a system like this (even if it means getting used to commandline or js files!).

Do you have an opinion or something to say about this?
comments

Leave A Comment