seven-phases-max

@grey: #a1a1a1;

.curve(@color: white) {
    @ecolor: escape(@color);
    background: url("... fill='@{ecolor}' ...");
}

t1 {.curve()}      // OK
t2 {.curve(blue)}  // OK
t3 {.curve(@grey)} // OK

seven-phases-max

// data:

.profile_image() {
    .thumbnail {width: 200; height: 100}
    .large     {width: 800; height: 600}
}


// usage:

seven-phases-max

.profile_image() {
    thumbnail: 200 100;
    large:     800 600;
}

seven-phases-max

.profile_image() {
    .thumbnail {width: 200; height: 100}
    .large     {width: 800; height: 600}
}

// or alternatively:

@profile_image: {
    @thumbnail: {width: 200; height: 100}
    @large:     {width: 800; height: 600}

seven-phases-max

// Mixin
.color(@color) {
    &-@{color} {
        color: @color;
    }
}

// Usage
.text {
    .color(red);

seven-phases-max

// data:

@on-primary: #ffffff;
@icon-variants: active, inactive, disabled;
@icon-opacity-on-primary: 70, 50, 38;

// test:

div {
    r: .get-icon-color(inactive)[]; 

seven-phases-max

.font(@value) {font-weight: @value}

// usage:
h1 { 
    .font(700); 
}

seven-phases-max

.get-property-box(@mask) {
    .- {
        each(@mask, {r+_: @value});
    } .-;
    return: $r;
}

#usage {
    @mask: 5, 6, 42;
    border-radius: .get-property-box(@mask)[];

seven-phases-max

/*
Note the code below won't work in current Less version (3.9) because of the #3369 bug
For a working version see https://gist.github.com/seven-phases-max/3b6141f2e6907fd12406ef80d66ffc7e
*/

.get-property-box(@mask) {
    each(@mask, {return+_: @value});
}

seven-phases-max

.pipe(less({modifyVars: {
    '@color1': '#535859',
    '@color2': '#ff0000',
    '@color3': '#ccffcc'
}}))