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.