DEV Community

Cover image for Sass vs Scss
Joel Olawanle
Joel Olawanle

Posted on • Updated on

Sass vs Scss

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%);
}
Enter fullscreen mode Exit fullscreen mode

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%)
Enter fullscreen mode Exit fullscreen mode

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! 😎

Top comments (17)

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 • Edited

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

Thanks for this!

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

welcome

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

To use scss in React application, check out this article

Collapse
 
olawanle_joel profile image
Joel Olawanle

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

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

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

Sorry, for that... Already fixed that

Collapse
 
andrewbrown profile image
Andrew Brown 🇨🇦

I use SASS 1.0

Collapse
 
olawanle_joel profile image
Joel Olawanle

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

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
 
petroskoulianos profile image
Petros Koulianos

Great explanation 😀

Collapse
 
olawanle_joel profile image
Joel Olawanle

Thanks so much for reading and the feedback😁

Collapse
 
hmcodes profile image
Hodeem

Very clear and simple explanation. Love it!

Collapse
 
olawanle_joel profile image
Joel Olawanle

Thanks so much for reading and the feedback😁