Normally HTML is written in a clear nested and visual hierarchy while CSS is not. Sass facilitates you to nest your CSS selector in a way that follows the same visual hierarchy of your HTML. You should very careful while nesting because overly nested rules may cause complexity and it proves hard to maintain.
lets you nest CSS selectors in the same way as HTML. Look at an example of some Sass code for a site's navigation:
In CSS, the rules are defined one by one (not nested)
Above example write in Sass Nested Rules
Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector.
The nested selectors that Sass provides can save a lot of typing and clarify your CSS, but there are some situations that can't be handled by simple nesting.
Take for example the a:hover pseudo-selector. :hover by itself isn't valid CSS (or Sass), so despite how readable it is, you can't write:
a {
color: red;
:hover: green; //this isn't valid
}
Using a parent selector & and Sass nesting, you can write:
a {
color: red;
&:hover: green;
}
The Sass transpiler will convert this to valid CSS
a {
color: red;
}
a:hover {
color: green;
}
Sass provides one more CSS extension that will save you typing and make your code more readable: nested properties. There are groups of CSS properties that have the same prefix, such as font-family, font-size and font-weight or text-align, text-transform and text-overflow. Sass allows you to treat them as nested rules:
The Sass transpiler will expand these nested rules into normal CSS
