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! 😎
Top comments (17)
That's awesome. I started using scss recently and just assumed that the difference was only the filename.
Check out this article, to learn the main features provided by scss and learn how to use it effectively
Thanks for this!
welcome
To use scss in React application, check out this article
Wao, it's far more than that. Thanks for reading!
Yo Joel, just a heads up this post should not have the tag #news
Sorry, for that... Already fixed that
I use SASS 1.0
Wao, any personal reason for that?
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.
Ohhh.... I now perfectly understand.
That's why the choice of which one to use solely depends on the user!
pretty much lol
Great explanation 😀
Thanks so much for reading and the feedback😁
Very clear and simple explanation. Love it!
Thanks so much for reading and the feedback😁