What is the difference between CSS and SCSS ?

30 Jun, 2022
Introduction
CSS : Cascading Style Sheet is the basically the scripting language. CSS is used for designing web pages.CSS is the most important web technologies that are widely used along with HTML and JavaScript. CSS have file extension of .css.
SCSS : Syntactically Awesome Style Sheet is the superset of CSS. SCSS is the more advanced version of CSS. SCSS was designed by Hampton Catlin and was developed by Chris Eppstein and Natalie Weizenbaum. Due to its advanced features it is often termed as Sassy CSS. SCSS have file extension of .scss.
Differences:
SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it.SCSS is full of advanced features.SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.Example: In CSSbody{
 color: #ffffff;
 font: $ubuntu-font: 'Ubuntu', 
                     'Arial',
                     'Helvetica',
                      sans-serif;
 font-size: xx-large;
 padding: 2rem;
}
Output:In SCSS$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

body{
 color: $white;
 font: $ubuntu-font;
 font-size: xx-large;
 padding: 2rem;
}
Output:Knowing SCSS helps you to customize Bootstrap 4.SASS adds the feature of @import which lets you import your customized SCSS files.Example:@import "my theme";
@import "framework/bootstrap";
SASS allows us to use nested syntax. Let’s say if you have to style a specific ‘paragraph’ in ‘div’ in ‘footer’ you can definitely do that by SASS.Example:footer {
    div {
        p {
            margin: 2rem;
            color: #2f2f2f;
        }
    }
}
At last, what makes SASS a good option to use is that it is well documented.
SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it.
SCSS is full of advanced features.
SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.Example: In CSSbody{
 color: #ffffff;
 font: $ubuntu-font: 'Ubuntu', 
                     'Arial',
                     'Helvetica',
                      sans-serif;
 font-size: xx-large;
 padding: 2rem;
}
Output:In SCSS$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

body{
 color: $white;
 font: $ubuntu-font;
 font-size: xx-large;
 padding: 2rem;
}
Output:
Example: In CSSbody{
 color: #ffffff;
 font: $ubuntu-font: 'Ubuntu', 
                     'Arial',
                     'Helvetica',
                      sans-serif;
 font-size: xx-large;
 padding: 2rem;
}
Output:
body{
 color: #ffffff;
 font: $ubuntu-font: 'Ubuntu', 
                     'Arial',
                     'Helvetica',
                      sans-serif;
 font-size: xx-large;
 padding: 2rem;
}

Output:
In SCSS$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

body{
 color: $white;
 font: $ubuntu-font;
 font-size: xx-large;
 padding: 2rem;
}
Output:
$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

body{
 color: $white;
 font: $ubuntu-font;
 font-size: xx-large;
 padding: 2rem;
}

Output:
Knowing SCSS helps you to customize Bootstrap 4.
SASS adds the feature of @import which lets you import your customized SCSS files.Example:@import "my theme";
@import "framework/bootstrap";

@import "my theme";
@import "framework/bootstrap";

SASS allows us to use nested syntax. Let’s say if you have to style a specific ‘paragraph’ in ‘div’ in ‘footer’ you can definitely do that by SASS.Example:footer {
    div {
        p {
            margin: 2rem;
            color: #2f2f2f;
        }
    }
}

footer {
    div {
        p {
            margin: 2rem;
            color: #2f2f2f;
        }
    }
}

At last, what makes SASS a good option to use is that it is well documented.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
CSS-Misc
Picked
SASS
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.