seven-phases-max

@color: red;

.lib() {
    .thumbnail() {
        color: @color;
    }
}

.thumbnail {
    .lib.thumbnail();

seven-phases-max

.some {
    .mixin("foo.png", 42px, {who: am I?;};);
}

.mixin(@value) {
    background: extract(@value, 1);
    min-height: extract(@value, 2);
    @neverlate: extract(@value, 3);
    @neverlate();
}

seven-phases-max

.icon(1) {.icon_1}
.icon(2) {.icon_2}
.icon(3) {.icon_3}
.icon(4) {.icon_4}
.icon(5) {.icon_5}
// etc.

.icon-hover(1) {.icon_1_hover}
.icon-hover(2) {.icon_2_hover}
.icon-hover(3) {.icon_3_hover}

seven-phases-max

.icon(1) {&:extend(.icon_1);}
.icon(2) {&:extend(.icon_2);}
.icon(3) {&:extend(.icon_3);}
.icon(4) {&:extend(.icon_4);}
.icon(5) {&:extend(.icon_5);}
// etc.

.icon-hover(1) {&:extend(.icon_1_hover);}
.icon-hover(2) {&:extend(.icon_2_hover);}
.icon-hover(3) {&:extend(.icon_3_hover);}

seven-phases-max

@media screen and (max-width: 20em) {
   .cat   {color: red;  .img(3em)}
   .tiger {color: blue; .img(5em)}
}

@media screen and (min-width: 21em) {
   .cat   {.img(5em)}
   .tiger {.img(7em)}
}

seven-phases-max

.animal(@color: whatever, @imgWidth: null) {
    &   when (iscolor(@color))     {color: @color}
    img when (isnumber(@imgWidth)) {width: @imgWidth}
}

@media screen and (max-width: 20em) {
   .animal(@color: red, @imgWidth: 3em);
}

seven-phases-max

@textFont: "keergoodoo";

body {
    .font(@textFont, bold, 1.1em, 1.4em, 300);
}

.font(
    @name:       apercu,
    @nameWeight: light,
    @size:       1.0em,

seven-phases-max

body {
    .font-squirrel(keergoodoo, bold, 1.1em, 1.3em, 300);
}

div {
    .font("bambarbiya", 1.2em, 1.5em, 700);
}

// implemetation:

seven-phases-max

.a {
    .icon-list-small();
}

.b {
    .child-icon-list-small();
}

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

seven-phases-max

.sprite-resize(@file) {
    .sprite-ret('@sprite-retina-@{file}');
    .sprite-norm('@sprite-@{file}');
}

.sprite-ret(@ret) {
    background-image: url(@ret);
}

.sprite-norm(@norm) {