Difference between CSS and SCSS

If you are not using CSS (cascading style sheets) in your web development projects its a reason to be a shame. Because with CSS it is easy to produce a better and clear code than using styles directly to your HTML pages.

However, with the arrival of the SASS, the use of CSS has reduced drastically. There 2 types of SCSS syntaxes such as Intended Syntax (SASS) and SCSS syntax. The main difference between those two is that SCSS is an improved version of SASS. The only difference between SASS and SCSS with respect to their syntax is the use of indentation { }. In other words, SCSS is nothing but SASS with the indentations in it.

So, from this article, I’m going to discuss the difference between CSS and SCSS.

CSS (Cascading Style Sheets)

CSS Logo

Cascading Style Sheet is basically the scripting language. CSS is used for designing web pages. CSS is the most famous web technologies that are generally used along with HTML and JavaScript. CSS have file extension of .css.

Every item or element on a web page is part of a document written in a markup language. In most cases, HTML(Hypertext Markup Language) is used, but there are other languages in use such as XML and XHTML.

SCSS (Syntactically Awesome Style Sheet)

SASS (SCSS) Logo

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.

Using SCSS, we can add many additional functionalities to CSS such as variables, nesting, and more. All these additional functionalities can make writing CSS much easier and faster as compared to writing the traditional CSS.

SCSS produces a traditional CSS that the browser can understand by running the SCSS files on the server running your web app. Reading the code in SASS or SCSS is faster than reading in CSS.

For a better understanding of SCSS, let us take a simple example to understand its syntax.

$variable: value 1;
.rule-1 {
  value: $variable;
}
$variable: value 2;
.rule-2 {
  value: $variable;
}

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 From CSS :

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

Example From 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.

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

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

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

Source: GeeksForGeeks