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
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
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