/* Simple nesting */ .div { color: blue; .nest { &.deep { color: yellow; .deeper { color: angry; .deepest { color: purple; .hidden {} } } } color: red; } } /* & combinator and placements */ h1, h2, h3 { a, p { &:hover { color: red; } } } a { color: red; &:hover { color: blue; } div & { color: green; } p & span { color: yellow; } } .foo { .bar, .baz { & .qux { display: block; } .qux & { display: inline; } .qux & .biz { display: none; } } } /* @_o */ #first > .one { > #second .two > #deux { width: 50%; #third { &:focus { color: black; #fifth { > #sixth { .seventh #eighth { color: purple; + .sibling_selector { color: angry; } } } &:hover { // empty } } } ~ p.general_sibling_selector { color: unused; } height: 100%; } #fourth, #five, #six { color: #110000; .seven, .eight > #nine { border: 1px solid black; } #ten { color: red; } } } font-size: 2em; } /* Multiples expands to 160 identifiers */ h1, h2, h3, h4, h5 { a, p, div, span { .one, .two, .three, .four { &:hover, &:focus { display: block; } } } } .child, .sibling { & + & { color: red; } } .child, .sibling { & + & + & { color: red; } } .child, .sibling, .foo { & + & + & { color: red; } } .child, .sibling, .foo { & + & { color: red; } }