Top 4 Reasons to Use Sass

by Woei Yu, March 19, 2015

I admit, I am one of those old-school gals who believes in writing stylesheets by hand!

I’d heard about Sass but it really didn’t help that the first time I read about it, the word “terminal” and Sass seemed to go hand in hand.

Truth be told, I hate terminal. I use it when absolutely necessary. GUI is just the way I roll.

But there comes a time, when dealing with big (or small) projects, that you can’t help but wish there was a more efficient way of styling page.  And the reality is, if you are serious about styling, you really should include Sass (or any other CSS preprocessors) as part of your coding toolbox.

But if you are a CSS beginner, Sass is the absolutely wrong tool for you.

Just like any language, it is important to understand the core concepts before moving into any preprocessor of any sorts.

So for all your other reluctant style-crafter out there … here are my top 4 reasons how Sass made my life easier and can make your life easier too.

Write Less Not More With Variables

Variables alone are enough for you to give Sass a try.

It should be obvious that changing the value of a variable once is much more maintainable than changing the many instances of the value spread over any number of CSS files.

Sass variables are like those in other languages like C#, Java, JavaScript or PHP and you know how a simple concept like variables can simplify your code significantly.

Sass variables, like PHP, start with the dollar sign ($) character and can have different kinds of data types like color, string, boolean, multi-value.

The compiled Sass will output the CSS as below.

If you decide to use a different color than #FF0000 or want to change the border radius, you have to change it in multiple places. This is already irritating in small projects but think how aggravating it will be in a large one.

How much time have you wasted forgetting, looking up, and creating cheatsheet in your CSS files just to keep track colors alone?

Play with the above at Sassmeister here

Write Even Less code with Mixins

One of my favorite and, in my opinion, most powerful features of Sass is Mixins.

Mixins are similar to functions but not exactly. Function returns values or sometimes not at all; whereas mixins “return” CSS content.

In the example below, I am creating a mixin to return a block of CSS code for border radius and have 4 default parameters of 10px each.

Sounds simple so far, doesn’t it.

Using the mixin shown below…

It will output this CSS:

Best of all, I can easily apply this mixin to any other styling just by varying parameters. For example, this…

Will output:

Cool!

Play with the above at Sassmeister here

But here is one Sass feature that simply blew me away. Yeah, you guessed it … actual functions.

Functions – CSS the Way It Was Meant to Be

Instead of outputting CSS the way mixins do, Sass functions return an actual value which you can imagine in this mobile driven world can be very useful. This makes them a super powerful coding in a lot of my favorite Sass snippets.

For example, this code:

Will output this CSS:

Play with the above at Sassmeister here.

Faster is Always Better

Any CSS developer worth their salt usually breaks their CSS file into many smaller, more manageable chucks based on things like the specific page or usage. There is nothing wrong with it and, frankly, it is the best way to handle any sizable project.

But the problem with this approach is you can end up with a huge number of HTTP requests on your website which will slow down the load time of your webpages (something we all want to avoid).

But with Sass, you can compile all the various files into one CSS page that is handled by one HTTP request.

Need to change the styling for order button, no more scanning hundreds or thousands of lines of CSS code looking for that pertinent button style. Just open up file for the order page that contains the button styleing and make the changes.

It’s just another wonderful way to modularize your code, making it more portable and easier to maintain.

Summary

Honestly, there are at least 10 other killer reasons why one should use Sass. There are placeholders, extend, nested rules, expressions, and operations just to name a few.

Not to mention frameworks like Compass or Bourbon which are built on top of Sass and come with a whole new bag of nifty tricks that need their own articles to begin to explain properly.

Yes, you still need to install Sass from a command line but thanks to GUI compiler like Scout, installation is the one and only time you ever had to touch the command line.

But if you just want to dip your toe in Sass without spending time installing and setting up the necessary software, I highly recommend Sassmeister which is a web based Sass playground.

Here are those examples to play with again:

See http://Sassmeister.com/gist/a3092675ea061fdfb9e7 for Variables
See http://Sassmeister.com/gist/b22b03d2e618200684ea for Mixins
See http://sassmeister.com/gist/363a70b83fb405065c06 for Functions

It is undeniable. Sass is super powerful and has completely changed the way I approach my styling and managing of CSS.

It may not be for everyone, but if you are searching for ways to improve your development workflow and are keen broaden your skill set, then it can’t hurt to investigate.

 

No Comments


Leave a Reply

Your email address will not be published Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*

Let me know what you think

RSS
Follow by Email
Facebook
Google+
http://woeiyu.com/software/css/reasons-using-sass">
Twitter
SHARE
LinkedIn

Recommendations

Enjoy this article? Please spread the word :)