CSS vs SCSS which is better?

Total
0
Shares
CSS vs SCSS

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 (Cascading Style Sheet):

Scripting language and used to design web pages to make them attractive. Also, 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):

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. SCSS file extension of .scss

 

Features:

SCSS allows variables and avoids repeating:

SCSS allows us to define a variable and assign some value. This will avoid the repetitions Like the color variable. Check the below example,

                    
$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 for 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.

 

Conclusion:

Finally,  it’s an overview of CSS and SCSS. SCSS is better than CSS but recommends you to explore all its features. So you can understand SCSS completely and freely use this in your project.

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

Table of Contents Hide Learn CSS in 12 Minutes:Why will we use CSS?Selector:Class Selector:CSS Universal Selector (*):CSS Grouping Selector:How can I add CSS to the project? Learn CSS in 12…
View Post