Sass? Yes, Please!

I will be the first to admit, when I initially heard about Sass I wanted absolutely nothing to do with it, even though colleagues of mine were saying it was the “next big thing.” A quick Google search brought me to the official Sass site, which featured some code examples. At the time, I said, “I like my custom hand coded CSS just fine, thank you!” But I began to reconsider after reading articles from Chris Coyier and a book from Dan Cederholm, who are also staunch supporters of handcrafted CSS (hell, Dan even wrote a book on that too). Lo and behold, I started to discover a lot of wonderful things that I could apply to my projects with Sass. 

Variables

Variables are a nice way to store information that can be used through all of your stylesheets. With a variable, you set the value in one place, and if it needs to be changed, it only has to be changed in that one place. An example:

Nesting

Nesting is a great way to keep your CSS rules grouped together, which can make them easier to read. For example, take a look at this review block:

Needless to say, nesting rules! But with great power also comes great responsibility. It’s very easy to get carried away with nesting, and the next thing you know, you’re five levels deep and you’ve painted yourself into a specificity corner of pain and suffering. Don’t be that guy: stick to nesting three levels deep at most. This will keep your styles clean, and it won’t give the next FED to work on that file nightmares.

Mixins

Mixins can be a huge time-saver. A mixin will allow you to write multiple CSS declarations that are then able to be re-used through the use of variables. A good example of this is a mixin for transforms, which require duplicating CSS declarations with different vendor prefixes:

Extends / Inheritance

The @extend directive will allow you to reuse a set of style declarations between CSS rules, keeping your code nice and DRY in the process. This is SUPER useful:

Take it from me: Sass will make you look at using CSS in a whole new way. Not only that, but embracing Sass can give you more efficient alternatives to traditional approaches in styling a website. As the number of user devices continues to grow alongside the variance of pixel densities, we need to take advantage of all the tools at our disposal to organize and improve our workflow. Take the plunge and I bet you will be pleasantly surprised at what you discover. Happy Coding!

« Prev Article
Next Article »