Nesting CSS
Rules can be nested to avoid repetitive typing when scoping to a common parent selector. If you are not used to using a CSS Pre-processor this may feel somewhat strange at first, but you'll very quickly enjoy the benefits.
A good example might be:
ul.menu {
margin: 0;
li {
list-style: none;
a {
color: inherit;
}
}
}
Will render as:
ul.menu {
margin: 0;
}
ul.menu li {
list-style: none;
}
ul.menu li a {
color: inherit;
}
Parent Referencing
You can use the parent reference symbol & for placing the parent selector explicitly.
a {
color: #000;
&:hover {
color: #ff0000;
}
}
Will render as:
a {
color:#000;
}
a:hover {
color: #ff0000;
}