Difference Between CSS and SCSS

CSS (Cascading Style Sheet) is basically the scripting language. It is used for designing web pages. It is the most important web technology that is 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. It 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.

SCSS contains all the features of CSS and also contains more features that are not present in CSS which makes it a good choice for developers to use it. SCSS has variables, so you can shorten your code by using variables. It is a great advantage over conventional CSS.

Using SCSS, you can customize Bootstrap 4. SASS adds the feature of @import which lets you import your customized SCSS files.

What is SASS

SASS (Syntactically Awesome Style Sheets) is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other functionalities that make writing CSS much more powerful. It extends the standard CSS characteristics by introducing the benefits of a basic programming language. So, SASS will compile your code and generate the CSS output a browser can understand.

Variables in SASS

One of the great benefits of using a CSS pre-processor like SASS is the ability to use variables. A variable allows you to store a value or a set of values, and to reuse these variables throughout your SASS files as many times you want and wherever you want. For example,

$blue: #004BB4;
$ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
$nunito-font: 'Nunito', 'Arial', 'Helvetica', sans-serif;

Once you have created the variables, you can use them wherever you need to:

h1 {
 font: $ubuntu-font;
 color: $blue;
}
a {
 font: $nunito-font;
 background-color: $blue;
 padding: 6px;
}

When you compile your SCSS files, it will replace the variable name with its stored value.