SASS

What is SASS?

SASS stands for Syntactically Awesome Style Sheet. It was initially designed by Hampton Catlin and developed by Natalie Weizenbaum. It is considered for many developers as the most mature, stable, and powerful professional-grade CSS extension language in the market. SASS adds nested rules, variables, mixins, selectors inheritance, functions, and much more.

Why should you switch from your conventional CSS to SASS?

One of the reasons to learn SASS is that unlike CSS where many times we have to repeat blocks of code to make simple changes on certain elements, with SASS we can reuse the same block of code and add the needed properties without having to copy and paste the same block of code. The second reason is that its easy to learn syntax can be easily picked within hours by a skillful CSS developer. If you can write CSS learning SASS will be a walk in the park because SASS keeps the same properties names and just adds a few functionalities that turn regular CSS to almost a programing language. The third reason is its active community along with other big tech companies that constantly keep improving SASS. So if you are still doubting if SASS is worth learning, I would like to add that an endless number of frameworks are built with Sass. Sierra, Scooter, Kickoff, Materialize, and Griddle just to name a few.

How SASS works?

SASS is a pre-processor that means that is a program that takes input and produces an output. In simple words, we write our code in SASS, then a compiler processes our SASS code and turns it into CSS. The reason why we need to convert SASS into CSS is that the browsers cannot read SASS code. But do not worry, you do have to write CSS and SASS. Once the SASS code is written the compiler will take care of the rest.

My two favorite features

Variables

Creating a variable in SASS is super simple. Just begin with a $ followed by the name you want to give to your variable and then just assign the value you like for the variable.

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

But despite their simplicity, variables can be really helpful giving you the power of keeping a DRY code.

Mixins

If you hate to repeat big blocks of code in CSS because you need to make a simple modification on an element, you will love mixins. Mixins allow you to define styles that you can re-use throughout your stylesheet.

You define your mixin

@mixin reset-list
margin: 0
padding: 0
list-style: none

Then you can reuse them among other elements

@mixin horizontal-list
@include reset-list
li
display: inline-block
margin:
left: -2px
right: 2em
nav ul
@include horizontal-list

Conclusion

SASS is a really powerful tool to have in your repertory as a web developer giving your stylesheets an extra boost in power and helping keep your code DRY and organized.