seven-phases-max

// yes, this is valid LESS code
1, 2, 3, 4, 5, 6, 7, 8, 9 {&, && {o:-}}

seven-phases-max

html {
    .factorial(15);
}

.factorial(@n) {
    .-(@n, 1);
    .-(@i, @r) when (@i = 0) {factorial: @r}
    .-(@i, @r) when (@i > 0) {
        .-((@i - 1), (@r * @i));
    }

seven-phases-max

// "Arrays of Structures in LESS"
// see http://stackoverflow.com/questions/20071982

.product-colors(@index: 0) {
    @list:
        'white'  #fff,
        'green'  #0f0,
        'yellow' #ff0,
        'black'  #000,
        'red'    #f00;

seven-phases-max

// implementation:

.init-counter() {
    .counter-wrapper(0);
} .init-counter();

.counter-wrapper(@new) {
    .redefine() {
        @counter: @new;

seven-phases-max

// implementation:

.counter() {
    .counter-redefine();
    .counter-wrapper((@counter + 1));
}

.counter-wrapper(@new: 0) {
    .counter-redefine() {
        @counter: @new;

seven-phases-max

// v1:

ul.checked li:before {
    &:extend(.icon-ok:before);
    &:extend([class^="icon-"]:before);
    &:extend([class*=" icon-"]:before);
    color: #4fa33b;
}

// v2:

seven-phases-max

.getComplement(@baseColor) {
    @invertedColor: (#fff - @baseColor);
}

.classSelector {
    .getComplement(#f00);
    color: @invertedColor;

    .2() {
        .getComplement(#00f);

seven-phases-max

.getComplement(@baseColor){
    @-: (#fff - @baseColor);
}

.classSelector {
    .-() {color:            @-; .getComplement(#f00)}
    .-() {background-color: @-; .getComplement(#00f)}
    .-();
}

seven-phases-max

// ...............

@grid-columns:      3;
@grid-gutter-width: 33px;

// ...............

.grid-column-template { // Ok, the cons: this creates dummy class in the output
    position: relative;
    // Prevent columns from collapsing when empty

seven-phases-max

// ...............

@grid-columns:      3;
@grid-gutter-width: 33px;

// ...............

.grid-column-template { // Ok, the cons: this creates a dummy class in the output
    position: relative;
    // Prevent columns from collapsing when empty