ASP.NET Core 2 and Angular 5

Nested selectors

We will be able to nest selectors within other selectors, thus making our code more succinct and readable. Just to use a quick example, consider this:

quiz-list { 
    border: 0; 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
    display: block; 
} 
 
quiz-list.latest { 
        background-color: #f6f6f6; 
} 
 
quiz-list.latest h3 { 
    background-image: url(/img/latest-icon.png); 
} 

We can shrink this into something like the following:

quiz-list { border: 0; margin: 0; padding: 0; vertical-align: top; display: block; &.latest { // the & char represents the current selector parent. // in this scenario, it stands for: item-list.latest. background-color: #f6f6f6; h3 { background-color: @color-latest; background-image: url(/img/latest-icon.png); } } ...