.mixin { border: 1px solid black; } .mixout { border-color: orange; } .borders { border-style: dashed; } #namespace { .borders { border-style: dotted; } .biohazard { content: "death"; .man { color: transparent; } } } #theme { > .mixin { background-color: grey; } } #container { color: black; .mixin; .mixout; #theme > .mixin; } #header { .milk { color: white; .mixin; #theme > .mixin; } #cookie { .chips { #namespace .borders; .calories { #container; } } .borders; } } .secure-zone { #namespace .biohazard .man; } .direct { #namespace > .borders; } .bo, .bar { width: 100%; } .bo { border: 1px; } .ar.bo.ca { color: black; } .jo.ki { background: none; } .amp { &.support { color: orange; .higher { top: 0px; } &.deeper { height: auto; } } } .extended { .bo; .jo.ki; .amp.support; .amp.support.higher; .amp.support.deeper; } .do .re .mi .fa { .sol .la { .si { color: cyan; } } } .mutli-selector-parents { .do.re.mi.fa.sol.la.si; } .foo .bar { .bar; } .has_parents() { & .underParents { color: red; } } .has_parents(); .parent { .has_parents(); } .margin_between(@above, @below) { * + & { margin-top: @above; } legend + & { margin-top: 0; } & + * { margin-top: @below; } } h1 { .margin_between(25px, 10px); } h2 { .margin_between(20px, 8px); } h3 { .margin_between(15px, 5px); } .mixin_def(@url, @position){ background-image: @url; background-position: @position; } .error{ @s: "/"; .mixin_def( "@{s}a.png", center center); } .recursion() { color: black; } .test-rec { .recursion { .recursion(); } } .paddingFloat(@padding) { padding-left: @padding; } .button { .paddingFloat(((10px + 12) * 2)); &.large { .paddingFloat(((10em * 2) * 2)); } } .clearfix() { // ... } .clearfix { .clearfix(); } .foo { .clearfix(); }