Sassy Nesting

You already know this is about Sass right?

photo by tidetherecluse

I thought this was the perfect image to depict nesting. Look at how my sister’s face is nested in my sister’s face in my sister’s face. So sassy!

Frontend developers write a lot of CSS, and the bigger your projects get, the more repetition you do in your CSS. One of the rules for writing great code is to avoid repetition whenever you can, repetition makes our code bogus. This is one reason why we use loops in programming languages. Yet in CSS, there is still a lot of repetition. For this reason, pre-processors like SASS and SCSS were introduced to solve problems like repetition, inefficiency, and management. SASS makes use of tools such as nesting, variables, mixins, and functions to help us write more efficient CSS. Here, we will be discussing nesting and variables in sass.

SASS stands for “syntatically awesome stylesheets”. It is a preprocessor or extension language that helps us write clean, more efficient, and sustainable CSS code, which helps solve problems of repetition, and maintenance that often come with CSS.

A preprocessor is a program that takes one type of data and converts it to another type of data. Sass takes in .sass or .scss and transforms it to .css. For example, when you’re writing sass, and your code is saved in a main.sass or main.scss file, it is then compiled to a main.css file and read as a css file.

Another preprocessor language for CSS is known as SCSS, which stands for “Sassy CSS”. It has the same functions of SASS, but comes with a little more functionalities, such as the ability to write normal CSS. .sass and .scss are very similar. In fact, .scss is only the next generation of .sass. The difference is that the .scss syntax is more similar to the usual css syntax, while .sass uses indentation instead of curly brackets {} and semicolons (;).

Here’s an example of scss syntax — you can see that is more similar to our css syntax than the sass syntax below.

/* SCSS */
$red: #b22222;  
$padding: 16px;

.content-navigation {
  border-color: $red;
  color: darken($red, 9%);
}

.border {
  padding: $padding / 2; padding: $padding / 2; border-color: $red;
}

Here’s an example of sass syntax — you can see there are no brackets orsemi-colons here. But it makes us of indentation.

/* SASS */
$red: #b22222
$padding: 16px

.content-navigation
  border-color: $red
  color: darken($red, 9%)

.border
  padding: $padding / 2
  padding: $padding / 2
  border-color: $red

Variables in sass

Both sass and scss allow us declare variables. Variables make it easy to update code and reference values by allowing you to assign an identifier to a value. Imagine that! You can now declare variables in your CSS!!!

So instead of repeating the values you need all the damn time, you can just assign the variables where needed. e.g

/*declaring variables red as #b22222 and padding as 16px*/
$red: #b22222
$padding: 16px
.content navigation { 
/*assigning variable $red to border color*/
border-color: $red; 
}

In this lesson, we will be working with the .scss syntax, since it is closer to css, and is the next generation of the .sass. extension. But please bear in mind, that they’re super related, even compiled the same way in our command line.

Installing SASS

It’s super easy to install sass. You can install it by going to your command line, (terminal/bash) and typing in the following code:

gem install sass

This installs sass for you. But if you get an error, you might need to use sudo with your command:

sudo gem install sass

To check that you have sass installed, run this:

sass -v

Once you install sass, you can open your project folder, and create three files, index.html, style.css and style.scss. To compile this style.scss file to css, you will need to go to your folder (the one you just created) in your terminal and run this command. This command takes in your scss file and compiles it to css:

sass style.scss style.css

To allow sass continually watch for changes in your .scss files and compile it without you asking it to all the time, run this command:

sass --watch style.scss:style.css

Nesting in SASS

Nesting allows us put the styling selectors of the child element into that of the parent element. It is the process of placing selectors inside the scope of another selector. Selectors nested inside the scope of another selector are referred to as children. So that instead of having css like this:

.parent {
   color: red;
}
.parent .child {
   font-size:12px;
}

We have scss like this:

.parent {
   color: red;
   .child {
      font-size:12px;
        }
      }

This scss compiles to the css above. They both mean the same thing and do the same thing.

In scss, nesting isn’t only limited to selectors. You can also nest common css properties if you use a column (:) after the name of the property. For example:

body {
  font : {
    family: roboto, sans-serif;
    decoration: none;
    size: 11px; 
       }
     }

Isn’t this so coooooool. So here, we’ve learned what sass and scss are about, the differences between sass and scss, how to install it, variables in sass, nesting selectors in scss and nesting properties in scss. Of course there are more things to learn like mixins, and functions. But this a lot and I’m really happy we did this together wonderful cool nerds!!

I also made a youtube video for this lesson, but I’ve been having problems uploading it, but when I finally am able to, I’ll update this post with a link. 💛

Subscribe

Devcenter is a community driven network of verified Software Developers and Designers in Africa.

We bring you all the latest happenings in the developer ecosystem in Africa, right into your email box.