My favourite SASS features

CSS is always an easy language to understand, but when it comes to actually work with it is daunting and time-consuming.

I have always like CSS but the fact that it is difficult to organize it and that it doesn't throw useful error messages were some of the pitfalls of using CSS.

I recently started using SASS to write my CSS and I found it to be powerful. Sass is a CSS precompiler and it lets you use features that don’t exist in CSS yet such as variables, nesting, mixins, inheritance, functions and many more.

The way SASS works is that it let you use all the features to write CSS in a SCSS file and right after you saved the file it outputs your code in vanilla CSS in another file.

On this blog, I will try to list down some of my favourite SASS features.

Variables:

Just like any other programming languages variables let you store information that you want to reuse throughout your stylesheet. You can store things like colours, font, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable.

Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same.

@function:

We can user function as we normally user function in other programming languages to return a value.

Nesting:

SCSS allows us to nest CSS selectors similar to how we nest HTML. Nesting is a shortcut to creating CSS rules. So instead of writing so many lines of CSS just to be specific on the style we want to apply to an element, we simply nest it. Let’s use an example.

Re-using Styles with Mixins

A Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site.

Extending Styles with Inheritance:

Extending styles gives you the power to take existing SASS and CSS and plug it into your own styles. This helps you DRY up your css files.