loading...
Cover image for Sass vs Scss

Sass vs Scss

olawanle_joel profile image Joel Olawanle Updated on ・2 min read

The major reason Sass was developed was to make writing CSS more efficient and awesome. If you are looking for a preprocessor language to learn, I would strongly recommend Sass. Why Sass? Read why here. Before I proceed to explain the difference between Sass and Scss and which one is more preferable to use, I will first want to explain what Sass is all about.


Sass

Sass stands for Syntactically Awesome Style s heet. Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It is completely compatible with all versions of CSS. It is free to download and use.

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.

It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax.

Sass has two syntaxes which are Sass and Scss.


Sass vs Scss

The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and it takes the CSS syntax we are used to and gives it the super powers that come with Sass. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. This is really handy as it becomes a lot easier to convert our regular CSS styles to Scss.

/* SCSS */
$primary-color: #3bbfce;
$secondary-color: #ff8700;

.content {
  background-color: $primary-color;
  color: darken($secondary-color, 9%);
}

The second syntax(older syntax) is Sass which was created to make CSS a bit more awesome and writing of CSS codes more efficient by taking away the use of curly-braces & semi-colons, it uses the indentation of lines to specify blocks. Files in the indented syntax use the extension .sass.

/* SASS */
$primary-color: #3bbfce
$secondary-color: #ff8700

.content-navigation
  background-color: $primary-color
  color: darken($secondary-color, 9%)

With the above explanation, you can properly see the difference between Sass and Scss, the next question would be which one should I learn or which one should I use.


The truth is no one should answer that question for you, You should know what best works for you and which one suits your pattern of writing codes.

For me, I've never loved the Sass syntax because I'm already used to opening curly-braces and making use of semi-colons. And the fact that Scss is always beneficial when working as a team, I just couldn't stop using it.

But you are the one to make the decision for yourself!

You might want to learn more about Sass. Please check their documentation!


As always, any questions or suggestions, please feel free to leave a response or tweet me 🤭! Be sure to connect with me on socials! 😎

Discussion

pic
Editor guide
Collapse
whitewcallum580 profile image
Callum White

That's awesome. I started using scss recently and just assumed that the difference was only the filename.

Collapse
myogeshchavan97 profile image
Yogesh Chavan

Check out this article, to learn the main features provided by scss and learn how to use it effectively

Collapse
olawanle_joel profile image
Joel Olawanle Author

Thanks for this!

Thread Thread
myogeshchavan97 profile image
Collapse
myogeshchavan97 profile image
Yogesh Chavan

To use scss in React application, check out this article

Collapse
olawanle_joel profile image
Joel Olawanle Author

Wao, it's far more than that. Thanks for reading!

Collapse
adam_cyclones profile image
Adam Crockett

Yo Joel, just a heads up this post should not have the tag #news

Expect to see announcements of new and updated products, services, and features for languages & frameworks. You also will find high-level news relevant to the tech and software development industry covered here.

Collapse
olawanle_joel profile image
Joel Olawanle Author

Sorry, for that... Already fixed that

Collapse
andrewbrown profile image
Andrew Brown 🇨🇦

I use SASS 1.0

Collapse
olawanle_joel profile image
Joel Olawanle Author

Wao, any personal reason for that?

Collapse
andrewbrown profile image
Andrew Brown 🇨🇦

I've been using Sass since it came out. When Sass 2.0 was introduced it felt like a step backwards having to put back in all those curly braces.

Thread Thread
olawanle_joel profile image
Joel Olawanle Author

Ohhh.... I now perfectly understand.

That's why the choice of which one to use solely depends on the user!

Thread Thread
andrewbrown profile image
Andrew Brown 🇨🇦

pretty much lol

Collapse
pkoulianos profile image
petros koulianos

Great explanation 😀

Collapse
olawanle_joel profile image
Joel Olawanle Author

Thanks so much for reading and the feedback😁