seven-phases-max

@some-var: true;

.import-hello(@some-var);

.import-hello(true) {
    .some-class {
        @import "hello";
    }
}

seven-phases-max

@import "for"; // see https://github.com/seven-phases-max/less.curious/blob/master/src/for.less

.map(@property, @class-value-list...) {
    .for(@class-value-list); .-each(@value) {
         @class: extract(@value, 1);
        .@{class} {@{property}: extract(@value, 2)}
    }
}

seven-phases-max

.box-shadow(@values...) {
    // http://caniuse.com/#search=box-shadow
    .some-meaninful-name(box-shadow, 
        @values, -webkit- -moz- ~'');
}

.transform(@values) {
    // http://caniuse.com/#search=transform
    .some-meaninful-name(transform,
        @values, -webkit- -moz- -o- ~'');

seven-phases-max

usage {
  background-image: url('../img/web.gif') ; /** sprite-ref: mysprite; */ ;
}

seven-phases-max

#usage {
    .set(result-1, 1 lt 2, "true", "false");
    .set(result-2, 3 eq 3, "true-only");
    .set(result-3, 4 ne 4, "hidden");

    .set(result-4, iscolor(blue), "true", "false");
    .set(result-5, iscolor(55),   "true", "false");
    .set(result-6, isnumber(red), "hidden");
    .set(result-7, isnumber(77),  "true-only");
    

seven-phases-max

//
// Theme Styles
// --------------------------------------------------


// Theme variables
@import "variables.less";


// Bootstrap components

seven-phases-max

.danger_ .help-block,
.danger_ .control-label,
.danger_ .radio,
.danger_ .checkbox,
.danger_ .radio-inline,
.danger_ .checkbox-inline {
  color: #d9534f;
}
.danger_ .form-control,
input.ng-invalid.form-control {

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}