What is the difference between CSS and SCSS

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:

1: 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.

2: SCSS is full of advanced features.

3: SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.
* Example:
In CSS

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

**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;
}

4: Knowing SCSS helps you to customize Bootstrap 4.

5: SASS adds the feature of @import which lets you import your customized SCSS files.
Example:

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

6:. 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;
        }
    }
}

7: At last, what makes SASS a good option to use is that it is well documented.

Thank you for reading !

#CSS #SASS #Web Technologies