What's the difference between Css & Scss

Thank God for style sheet languages like Css and Scss; front-end would have been as stylish as a potato in a tuxedo!
If utilized properly, we can give your users an appealing feeling and a memorable experience with the appearance of our web pages.
The nutshell of this article is this: CSS, primarily, is the powerful **dude that helps us tell our website how it should look—colors, fonts, spacing, you name it. While Scss is like adding "S*uper" behind the "P*ower" of CSS.
Though, they've got a lot of similarities. Hence, we must clarify the differences.

What are the differences between CSS and Scss?

Cascading Style Sheet or CSS is the standard language used to describe the look and formatting of a document written in HTML. It allows you and me as developers to control layout, colors, fonts, and overall design.

On the other hand, Sassy Cascading Style Sheet or **SCSS **is a superset CSS. What that means is that any valid CSS syntax is also a valid SCSS. But in addition to that, SCSS introduces powerful features like variables, nesting, and mixins, which promote code readability, reusability, and maintainability. But at the end of the day, it's been compiled to CSS behind the scenes since that is what our HTML file can understand.

Think of CSS as customizing your video game character. You get to choose basic features like hair color and clothes. Scss is what helps you take your character up a notch. What if you could save your favorite colors and outfits to reuse again without having to remember every detail? That's the Scss variable feature for you. Note that this is also available with vanilla css.

With Scss, you also get to nest your styling rules. Meanwhile, this cannot be achieved in pure CSS. Nesting lets you keep your code tidy by putting related styles together, making it way easier to read.

Take a look:

Here's Css with which you cannot nest the css rules

.parent{
    padding: 1rem;
}

.child{
    margin: auto;
}

Here's scss allowing you to nest a CSS rule within its parent selector rule block:

.parent{
    padding: 1rem;

    .child{
        margin: auto;
    }
}

Another cool feature that SCSS provides but pure CSS lacks is called "mixins". With SCSS mixins, you can define reusable chunks of CSS, reducing redundancy.
In the video game example I made earlier, Mixins are like keeping both a kneel strike and a punch in a single command. As a result, your character will attack with both moves on an enemy whenever you call that command.
How cool is that? 😊
Instead of having to repeat the same couple of CSS declarations multiple times, You can keep these declarations as a group and apply them altogether by referencing the mixin name.

Take a look:
The typical method of centering a block element with CSS.

.item1{
    display: flex;
    align-items: center;
    justify-content: center;
}

.item2{
    display: flex;
    align-items: center;
    justify-content: center;
}

A better approach with Scss

1. Create mixin.

@mixin centerItem {
    display: flex;
    align-items: center;
    justify-content: center;
}

1. Apply (include) mixin where it's needed.

.item1{
@include centerItem;
}

.item2{
@include centerItem;
}

So, while CSS is the basic tool you start with to make your web pages look good, SCSS is like leveling up. It helps you manage everything better, especially when your project gets bigger and more complicated.

Was that helpful?

Comments

[Jon Randy 🎖️]

With Scss, you also get to nest your styling rules. Meanwhile, this cannot be achieved in pure CSS

This is not correct, nesting IS available in normal CSS but doesn't quite yet enjoy 100% browser support, but it is very broadly available:
caniuse.com/css-nesting
kilianvalkhof.com/2021/css-html/cs...

[Andrew Bone]

There are also proposals to add custom functions and mixins to CSS too! Though we're not there yet 😔

Future of CSS: Functions and Mixins

Andrew Bone ・ Feb 15

#css #webdev #future

[Peter Babatunde]

Thanks for the clarity Jon!

[Julian Gaston]

Hey, good read and highly agree.
One quick thing I wanted to mention, it appears your code blocks are not highlighted. There is a great article that goes over this. Highly recommend.
dev.to/hoverbaum/how-to-add-code-h...

[Peter Babatunde]

Thank you, Julian.

This is my first post here on dev.to and I had no idea. So, thanks

[Thomas Bnt]

Welcome on DEV @peterbabs, thanks @jgdevelopments for the tips! 🙌

[Ashley D]

Love this @peterbabs. I like how it's short and sweet, and you offered an example too. ❤️ I had seen SCSS in Codepen and was wondering what that was, and your article answered my curiosity.

[SHARDZ]

🌟 Thanks for sharing !

[Antonello Constantin]

Great and clear article, thank you!

[Peter Babatunde]

Thank you for you feedback Antonello. 👍