SASS is a css extension that makes writing CSS fun. Not just fun but it makes you work a little bit easier. This is because it has features that lessen the works of the developer. These are the ‘magics’ that SASS do:

Nesting Rule

In a regular CSS, you can’t nest your codes. If you do, there will surely be an error in your code. But in SASS, nesting is allowed. Here’s an example of SASS nesting rule:

1
2
3
4
5
6
7
8

.container {
	.content {
		height:200px;
		width:200px;
		background-color:black;
	}

}

and this is how you do it in regular css.

1
2
3
4
5

.container .content{
	height:200px;
	width:200px;
	background-color:black;
}

What I like about nesting is you can see that this particular element is a descendant of this element. Looking at the example, you can edit the properties of .container and .content at the same time because they are at the same block of codes unlike in regular CSS.

Variables

1
2

$margin: 0 auto;
$paragraphColor: #ff0000;

Another feature that helps developer in debugging. Let’s say you have 30 elements with the same font color of blue. Then in the middle of your work you decided to change it to red. Of course in regular css you’ll have to do it one by one. But in SASS there is this thing called variables. Like what I did in my example, I stored the color #ff0000 in a variable called $paragraphColor. So with the help of variables, you’ll no longer have to change a property of an element one by one. All you have to do is change the value of the variable and you’re done.