SCSS – What is the difference to CSS?

• SCSS contains all the features of CSS and more
• SCSS offers variables, you can shorten your code by using variables

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

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

• SASS adds the feature of @import which lets you import your customized SCSS files

@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.

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