Concept of Nesting & Variables in SASS

First of let's ask ourselves what is SASS? SASS stands for Syntactically Awesome Style Sheets, it is an extension to CSS. It comes with lots of exciting features such as variables, nesting, mixins, inline imports, built-in functions to manipulate color and other values amongst others. For the purpose of this post we will be focusing on NESTING and VARIABLES.

It also important to note to that you cannot directly use SASS on the browser since browsers are not designed to interpret SASS. To make the browser understand SASS, you need to use the SASS pre-processor to translate the SASS code into standard CSS. You can read more about how this works on the SASS official website!

What is Nesting?

Away from the scope of this article, you may have definitely heard about the term before and in plain english it is allowing items of similar characteristics to be able to be placed or stored one inside the other. That's pretty much it. In SASS the concept isn't so different either. Nesting is the process of placing selectors inside the scope of another selector (CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.).

Usually in CSS if you want to style a parent element as well as it's child you would have something like

But with SASS this is simplified and goes a long way in eliminating repetition in your CSS. Using the concept of nesting, the above would look a bit different and frankly a bit more exciting. It would more like

Of course the browser wouldn't understand this but with the help of the SASS pre-processor, this can be transpiled (the process of translating from SASS to CSS) to look like your regular standard CSS so the browser understands it better. The above transpiles to

.

Moving on, it is also important to note that there's no limit to how much can be nested. What does this mean? It simply means you can nest as many times as you need to. Take a look at the image

From the image above you can see that the .child is nested inside the .parent and the .a-child-nested-in-a-child is nested in the .child and the .another-child-nested is nested in the .a-child-nested-in-a-child and so on. The above will be transpile to your standard CSS and look a bit more like

With the help of SASS we have been able to eliminate having to write repetitive code and we have successfully been able to focus more on what we are working on rather spend time creating a structure in our CSS for nested elements in our HTML.

Can we only nest selectors?

Well, no! We can nest properties as well... Yes! CSS properties can be nested using SASS. Take a look at the image below

We have been able to simplify our CSS by nesting our properties. The above will transpile to look like

What are variables?

This refer to an element, feature, or factor that is liable to vary or change. Variables are one of the most popular and widely used feature in programming. As a matter fact I doubt there is any programming language that doesn't support the use of variables. Variables can be seen as placeholders or containers that store or hold a certain piece of data. In SASS variables are use to store reusable value for properties across your style sheet. Although this feature isn't unique to SASS (as it was recently added to standard CSS), the method of declaration and use still vary. Variables in SASS allow you to assign an identifier of your choice to a specific value. Usually this achieved using the dollar sign ($) followed by the name of your identifier, that is _$myunique_identifier .

Let's assume that you want to define a specific box-shadow value that you need to reuse across your stylesheet or a specific color code that will be used multiple times in your stylesheet , normally you would have to rewrite it every where you need to use it, but with the use of variables, you only need to declare it once and make reference to it with its unique identifier.

This will transpile to

Summary

SASS makes writing CSS more structured with all of its many features and it creates a really fun and stress free experience that allows you focus on just what you are working on.