What is the benefit of using preprocessors like Sass?

[KungPaoKitties]

Hi everyone, I have a basic understanding of preprocessors like Sass and Less, but I am still confused as to the benefit of not only using them but more importantly learning how to use them.

My understanding is it allows you to do cool things like create variables and such that you can call within your stylesheet like a brand color, but couldn’t you simply create a class that contains that color and then apply that class to any HTML elements you would like it to apply to?

I am still a novice so I apologize if this seems like a silly question. I just don’t understand the benefits fully especially when the time it will take me to learn SASS seems contradictory to it’s purpose: save time. Can anybody explain the benefits to me or point me in the right direction?

[Paulie_D]

Pre-processors make writing your CSS quicker not necessarily smaller…in fact it might make the CSS file bigger but that’s not usually an issue these days.

Also, you can create your brand color and without creating a new class make different shades of that color to apply elsewhere.

Once you get into it, writing SASS/SCSS/LESS is very intuitive and extremely extensible and flexible.

Of course, you need a fairly good grip on CSS to really take advantage.

Taking your class example.

I might have a class that gives divs a background color of yellow…so I call it “yellow-bg”…but now I want text of that color in a different div…I can’t reuse that class so I have to create a new one…”yellow” text.

.yellow-bg {
background-color: #FFFF00;
}

.yellow-text {
background-color: #FFFF00;
}

Fair enough…but I have to state the color twice in my CSS file…and if I decide to change that color in both statements…I have to find every instance of that color and change it.

BUT if I define that color as variable in my SCSS

$primary-color: #FFFF00;

.yellow-bg {
background-color: $primary-color
}

.yellow-text {
background-color: $primary-color
}

So if I change the brand color to blue…I can just change it once and the pre-processor will automatically ripple through the places where I’ve used that variable.

Now multiply that by all you colors, margins, padding etc., etc. abd you soon start to see the advantages.

[KungPaoKitties]

Ah okay that does make sense, but in your example why wouldn’t you be able to use the yellow-bg class in another div? It’s a class so it can be used more than once no? Although I guess semantically it wouldn’t make sense to use “bg” if it is applied to text, but the name could be changed nonetheless. I guess that using that kind of method though would also greatly increase the amount of classes you would have to apply to HTML elements and that wouldn’t be very practical. So basically am I right thinking that preprocessors simply make it easier on our end as coders? Basically you write less syntax using SASS and then SASS would output your minified syntax into lengthy CSS?

[Paulie_D]

Basically you write less syntax using SASS and then SASS would output your minified syntax into lengthy CSS?

This…exactly.

[RioBrewster]

First of all, in the case of SASS, valid CSS is valid SASS so technically there’s no learning curve at all.

If all you do is introduce variables for your color palette into your code, you have already saved enough time in maintenance to justify the tiny learning curve.

The other thing I really like is the ability to use nesting to organize my code. So you can write:

aside{
     background-color: $gray-lt;
     color: $gray-dk;
     font:   ...
     h2{
      font-weight: bold;
       }
      a{
        color: darken($link, 5%);
            &:hover{
               color: darken($link, 10%);
            }
         }
}

Instead of having to repeat:
aside {}
aside h2{}
aside a{}
aside a:hover{}
“`
and all the definitions for that element are in one spot. And I even adjusted my link color without having to actually specify a color. SASS calculates it for me.

And of course, you only need to learn it once. After that you can apply it to every project after.

[KungPaoKitties]

I’ve been playing around with SASS the past couple of days and I am definitely getting the hang of it. The cleaner indented syntax is something I’m really digging along with nesting. Variables are nice too. Although I don’t know if it’s completely fair to say there isn’t a learning curve at all. Sure it follows general CSS syntax, but obviously there are certain things (variables, mixins, etc) that won’t be as obvious without a tad bit of guidance.

[Steven]

border-color: darken($bg-color, 10%);

I’ve been working on learning SCSS for the past six months or so, and so far the snippet above has been one of my favorite bits. There are just so many parts to SCSS that make it so much easier to be consistent in your styles.

[Author]

Posts