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