code for a blogpost

1-too-much-nesting-fixed.less

.main-header {
    .nav {
        background-color: black;
        
        li {
            display: inline-block;
        }
        
        a {
            color: white;
            
            &:hover,
            &:focus {
                color: red;   
            }
        }
    }
}

2-too-much-nesting-fixed-compiled.css

.main-header .nav {
    background-color: black;
}
 
.main-header .nav li {
    display: inline-block;
}
 
.main-header .nav a {
    color: white;
}
 
.main-header .nav a:hover,
.main-header .nav a:focus {
    color: red;
}