Less CSS and more SASS

Stylesheets can be things of beauty or hellbeasts from the foulest places our imagination can take us. When any web developer opens a stylesheet, they can only hope for the best, until now.Hopefully they breathe a sigh of relief. A nicely formatted, clean, labelled stylesheet is like a cold beer on a warm summer day, a comforting hug when your code wouldn’t compile.

LESS and SCSS/SASS

Less & Sass

This all sounds great—but what are LESS and SASS? Both languages extend CSS, allowing them to use things like variables, mixins, operations and functions. These are then either compiled on the server’s end and spit out some CSS, or use JS to compile it all client side.

What you may write in CSS:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

How you could write it in LESS:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

A possible alternative:

#header        { color: black;
  .navigation  { font-size: 12px; }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

Well heck, I can use variables and operations in CSS—Sign me up! What’s that? I can even nest my rules inside each other and it’ll figure the CSS out for me? It follows the structure of the DOM and is more concise?! Again, where do I sign up?!

Places like lesscss.org and sass-lang.com have plenty of options for you to play with!

It really is all fun and games

So far this has sounded like an overall positive, succinct preview of what it’s like using CSS extenders. But since when has anyone ever found me to be positive—much less about CSS?

After finishing working on refactoring some SASS files; the amount of overrides and !importants thrown in to handle overrides was absolutely ridiculous. I was able to reduce the files by a few thousand lines and cut down filesize by 45%.

In the hands of the lazy, the overworked, and the bewildered, LESS and SASS become dangerous. Stylesheets become bloated with redundant code, overcomplicated declarations and deep nesting that quite frankly will make you want to kill someone. However, in the hands of a benevolent ninja code monkey, CSS extenders are pretty much the cats ass.

What are some of your favorite resources for learning LESS and SASS? Sound off in the comments below!