SASS Nesting
SASS can be used to define hierarchical elements in nested format. In nesting when SASS is compiled in plain CSS each parent element is associate with its child elements to generate independent rules. In nesting each level may have its independent properties.
SASS Nesting Syntax:
The syntax of SASS nesting is write down child elements in successive curly parenthesis. These is no limit of nesting in SASS.
Example:
.header {
.nav {
a {
color: #E7E7E7;
}
background-color: white;
}
}
Compiled CSS:
The compiled CSS code for the above SASS will be as:
.header .nav {
background-color: white;
}
.header .nav a {
color: #E7E7E7;
}
SASS Seudo Selectors:
SASS nesting can also be used to define properties of pseudo-selectors. For this purpose we have to use & (ampersand) operator in nested/child element.
Example:
.tab {
&:hover {
color : blue;
&.active {
background-color: gray;
}
}
Compiled CSS:
.tab:hove {
color : blue;
}
.tab.active {
background-color: gray;
}
SASS Nesting CSS Properties:
Some CSS properties has two parts which are separated by hyphen. SASS also provide syntax to define these properties using nesting.
Example:
font: {
weight : bold;
size : 24px;
family: "Helvetica Neue";
}