How To do Nesting in SASS ?


Nesting is quite common in programming

When we writing HTML or any other programming

we've probably noticed that it has a clear nested and visual hierarchy. But in CSS, Nesting

is not allowed.

 In CSS, the rules are defined one by one.

Look these code I written in CSS

Test0 image

If you look at it you can see that I repeated some selectors. They are important for

the final style, but when you are writing code, you don’t want to repeat yourself.

Computers are good for repetitive work so why don’t use them for this too? SAAS

has solution for this. It’s called nesting. It’s main idea is that child elements are

written inside of the parent curly brackets. Than I can re write the CSS code into

the SASS CSS (.scss) version

Test1 image

After the compilation the code look like this...

See how to compile the SASS file How to start using SASS AND COMPASS in 10 minutes

Test3 image

Add new comment