What makes SASS so interesting?

There are tons of CSS Pre-processor we have including LESS, STYL, and of course SASS, but what makes SASS so much interesting? Why people prefer to use SASS more than other alternatives?

The answer lies somewhere in between the SASS properties and strong ties with CSS basics it has which people are already familiar with. Here is a basic rundown of concepts we have in SASS.

SASS variables:

Similar to programming languages, SASS provides an ability to store common CSS properties in a variable. The most common use case is to store the hex color value in a variable for further usability.

// DEFINE
$color-primary: #f908h7;
//USE
.div{
background-color: $color-primary;
}

Predefined LIGHTEN/DARKEN function:

While hovering on any element, it is always the case that we might want to darken or lighten the color by a certain amount to have a great user experience. SASS provides us a way to do that by using a predefined function and refrain ourselves from using hex-value for each shade.

background-color: darken($color-primary, 10%); // will darken it by 10% and similarly for lighten

Mixins:

The most popular and much loved by the SASS community. SASS Mixins are like a set of custom defined lines of CSS properties for reusability. For example, the people who are familiar with the traditional way of writing CSS, the “pre-flexbox/pre-CSSgrid era”, they do know its such a pain to write “clearfix” a whole bunch of times to avoid uncertainty in the code. But what if there was a hack to write it in one place and call this function whenever we want? So, SASS Mixins are all about the last pit! It is simply like defining a custom CSS “function” and calling it whenever we want that piece of code.

// Define a mixin called clearfix
@mixin clearfix {
 &::after {
 content: “”;
 clear: both;
 display: table;
 }
}
//Then call it at bunch of place to use it
nav {
 @include clearfix;
}

Functions in SASS:

Very easy and rarely used. It does help in explicitly defining a mathematical function inside a function. But the catch is, we can most write mathematical operations inside the SASS file typically anywhere.

//we can define custom functions called divide in this case by passing any arguments such as a,b
@function divide($a,$b){
 @return $a/$b;
}
//and later use the function
nav{
 margin: divide(60,2) * 1px; //to convert the unit to px we have to           multiply by 1px.
}

Extends in SASS:

Most sincerely, we can write a placeholder with a whole bunch of properties, and make other elements “extend” that placeholder. Oh but wait!! Isn’t that what we do in Mixins?? And, Yes, it is very similar to the Mixins and thus creates confusion among developers. The only little quirk with Extends is we should only use extend where the element actually inherits with the parent element like a “button” and “button: hover” and should not totally be different, in that case just go with Mixins!

%btn-placeholder {
 //write styles here common to parent-button
 padding: 10px;
 margin: 8px;
}
btn-placeholder:link{
 @extend %btn-placeholder;
  //define styles only for custom link button here
}

And that pretty much sums up all the important concepts associated with SASS.

See you next time :)