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