Benefits of SCSS

2022年2月03日
Web Service

SCSS (Sassy CSS) is the superset, it’s the more advanced version of CSS. We can add additional functionalities to CSS such as variables, nesting , loops, indentations and more by using SCSS. All these additional functionalities can make writing CSS much easier and faster as compared to writing the traditional CSS.

Nesting

Nesting has many benefits:

Nesting prevents the need to write the same selector over and over. SASS allows us to use a nested syntax, which is code contained within another piece of code that performs a wider function. In SASS, nesting allows a cleaner way of targeting elements. In other words, we can nest HTML elements by using CSS selectors.

Nesting is a more natural syntax and is easier and faster to read and understand.

Nested styles are more

Loops

We can set up loops when SCSS is used.

Variables

SCSS offers variables in order to declare re-used properties in one place. Using traditional CSS, we would need to repeat the same code over and over, but with SASS we can store these values as variables.

Mathematical functions

In SASS, we can also use mathematical operations like +, -, *, /, or %. This allows us to influence size specifications, for example.

Indentations

The original SASS works with indentations and line breaks to structure the code. We don’t need parentheses to display nesting or semicolons to mark line ends.

By Tsuki