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

It might not be such a big deal for small-scale CSS files, yet it's a great readability improvement for big ones.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.219.236.70