Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by mimik2
mimik2
14,766 Points

Is it necessary to learn SASS?

Is it really necessary to learn SASS? I still don't see what is so awesome about it. To me it is just a variation of CSS and if you are doing good with CSS why learn SASS again?

2 Answers

jacobproffer
jacobproffer
24,604 Points

Hey Mimi,

You don't have to learn Sass. However, it's very beneficial. With Sass, you can truly be more efficient and write more semantic and DRY CSS.

Take this plain CSS for example:

.myClass {
    padding: 88px 0;
}

.myClass h1 {
    font-size: 2.5em;
}

.myClass a {
   color: red;
}

See how many times I have to target the class, myClass?

Here's how it looks using Sass:

.myClass {
    padding: 88px 0;
    h1 {
        font-size: 2.5em;
    }
    a {
        color: red;
    }
}
mimik2
mimik2
14,766 Points

Oh ok I see. it makes things cleaner and probably a time-saver. Thank you for replying.

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey Mimi,

Jacob already mentioned a good reason to use a preprocessor like Sass. Another good reason to use Sass are variables and mixins. The main benefit in using variables and mixins is that your code is way more maintainable.

Let's take the code Jacob posted as an example. Imagine you also want your paragraphs to be red.

.myClass {
    padding: 88px 0;
    h1 {
        font-size: 2.5em;
    }
    a {
        color: red;
    }
    p {
        color: red;
    }
}

But what if you don't like the default color of red and you'd rather have a color like "tomato" as red on your site. Well, you could change both the color of a and p to tomato. Or you could just set a $red variable which you set to tomato and give it to your a and p.

$red: tomato;

.myClass {
    padding: 88px 0;
    h1 {
        font-size: 2.5em;
    }
    a {
        color: $red;
    }
    p {
        color: $red;
    }
}

Now every time you want to change the red that's used you just have to change the $red variable instead of changing every element's color separately. And that's just a small example. Especially when your code becomes larger this makes it far more maintainable and clear.

However not everyone uses a preprocessor and often you don't need a preprocessor like Sass in your projects. It's just important that you try it out and then you'll notice if you like it or not. And then it's also important to know if your project needs Sass or not.

I hope I could show you another benefit of Sass and help you to decide whether you should learn it or not. :) If you have other questions feel free to ask!