CSS vs SCSS which is better?

Total
0
Shares

CSS Vs SCSS:

When it comes to style the website pages, we have a choice to use plain CSS or SCSS in our project. CSS has been the best choice of developers for a few years. SCSS is an enhanced version of SASS. It’s most widely used these days.

In this article, we will learn about CSS vs SCSS, which is better?

So Let’s Start…!

CSS Vs SCSS battle:

CSS (Cascading Style Sheet): is a scripting language and used to design web pages to make them attractive. It’s most popular and widely used with HTML and Javascript. CSS have the file extension of .css

If you want to learn in detail about CSS then read this article.

SCSS (Sassy Cascading Style Sheets): is a superset and most advanced version of CSS. SCSS has advanced features (including variables, nesting, and many more) and its preprocessor language that is compiled or interpreted into the CSS.

SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand. All of these extra features in SCSS make them much simpler and quicker than writing the standard CSS. It has a file extension of .scss

Features:

SCSS allows variables and avoids repeating:

                    
$black: #000000;
$primary-font: sans-serif;
$unit: 1rem;
body {
 color: $black;
 font-family: $primary-font;
 padding: #{$unit * 3};
}

                

CSS also uses variables this is how it would look like.

                    
--black: #000000;
--width: 1024px;
--primaryFont: sans-serif;
body {
 width: var(--width);
 color: var(--black);
 font-family: var(--primaryFont);
}

However, CSS variables are more expensive at run-time than SCSS variables.

Nested syntax and Cleaner source code:

SCSS provides us with the nested syntax but first, we try the block of code in CSS.

For Example:

                    
.mylist {
 padding: 1rem;
 border: 1px solid grey;
}
.mylist .ul {
 list-style: none;
}
.mylist .ul li {
 display: flex;
}
.mylist .ul li a {
 display: flex;
 padding: 0.5rem;
 color: #000;
}

In the above code, you can analyze the parent class repeatedly apply the styling to the child.

But in SCSS we can use nested syntax that makes our code more clear and with no repetitions.

The above code in SCSS would look like that.

                    
.mylist {
 padding: 1rem;
 border: 1px solid grey;
 .ul {
   list-style: none;
   li {
     display: flex;
     a {
       display: flex;
       padding: 0.5rem;
       color: #000;
     }
   }
 }
}

SCSS also supports the use of custom functions that accept parameters and are used to prevent unused repetitions. These functions are known as mixins.

SCSS allows us to do math functions using operators. We can perform simple calculations inside our code for better output and performance.

We have a lot more features in SCSS like functions, mixins, loops, etc, which creates the life of a frontend developer easier.

SCSS is better than CSS but recommends you explore all its features.

Let me know your insights in the comments below.

I hope you enjoyed this article.

Thanks for reading!

See you there 😊
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

Learn CSS in 12 minutes

Learn CSS in 12 Minutes: CSS ( Cascading Style Sheet ) is used to style the web document easily, making web pages good-looking and presentable. We design web pages using…
View Post