Less/mixins — dev

The mixins included in Less aim to make cross-browser support easier allowing you to support multiple browsers in a fraction of the space it would normally take. The supported browsers are those found at Help:Supported browsers.

The following are some examples of how to use the mixins with example usage and what they expand to when parsed to CSS.

border-radius

// Usage:
.foo {
    .border-radius( 5px );
}
.bar {
    .border-radius:( 5px 10px );
}

// Output:
.foo {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.bar {
    -webkit-border-radius: 5px 10px;
    -moz-border-radius: 5px 10px;
    border-radius: 5px 10px;
}

box-sizing

// Usage:
.foo {
    .box-sizing( border-box );
}

// Output:
.foo {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

box-shadow

// Usage:
.foo {
    .box-shadow( 1px 1px 2px rgba( 0, 0, 0, 0.25 ) );
}

// Output:
.foo {
    -webkit-box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.25 );
    -moz-box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.25 );
    box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.25 );
}

filter

// Usage:
.foo {
    .filter( grayscale( 100% ) );
}

// Output:
.foo {
    -webkit-filter: grayscale( 100% );
    filter: grayscale( 100% );
}

transition

// Usage:
.foo {
    .transition( translate(12px, 50%) );
}

// Output:
.foo {
    -webkit-transition: translate(12px, 50%);
    -moz-transition: translate(12px, 50%);
    -o-transition: translate(12px, 50%);
    -ms-transition: translate(12px, 50%);
    transition: translate(12px, 50%);
}

rotate

// Usage:
.foo {
    .rotate( 20deg );
}

// Output:
.foo {
    -webkit-transform: rotate( 20deg );
    -moz-transform: rotate( 20deg );
    -o-transform: rotate( 20deg );
    -ms-transform: rotate( 20deg );
    transform: rotate( 20deg );
}

user-select

// Usage:
.foo {
    .user-select( none );
}

// Output:
.foo {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

gradient

horizontal

// Usage:
.foo {
    #gradient > .horizontal ( #fff, #000 );
}

.bar {
    #gradient > .horizontal( #fff, #000, 30%, 80% );
}

// Output:
.foo {
    background: #fff;
    background: -moz-linear-gradient( left, #fff 0%, #000 100% );
    background: -webkit-linear-gradient( left, #fff 0%, #000 100% );
    background: -o-linear-gradient( left, #fff 0%, #000 100% );
    background: -ms-linear-gradient( left, #fff 0%, #000 100% );
    background: linear-gradient( to right, #fff 0%, #000 100% );
}

.bar {
    background: #fff;
    background: -moz-linear-gradient( left, #fff 30%, #000 80% );
    background: -webkit-linear-gradient( left, #fff 30%, #000 80% );
    background: -o-linear-gradient( left, #fff 30%, #000 80% );
    background: -ms-linear-gradient( left, #fff 30%, #000 80% );
    background: linear-gradient( to right, #fff 30%, #000 80% );
}

vertical

// Usage:
.foo {
    #gradient > .vertical ( #fff, #000 );
}

.bar {
    #gradient > .vertical( #fff, #000, 30%, 80% );
}

// Output:
.foo {
    background: #fff;
    background: -moz-linear-gradient( top, #fff 0%, #000 100% );
    background: -webkit-linear-gradient( top, #fff 0%, #000 100% );
    background: -o-linear-gradient( top,#fff 0%, #000 100% );
    background: -ms-linear-gradient( top,#fff 0%, #000 100% );
    background: linear-gradient( to bottom, #fff 0%, #000 100% );
}

.bar {
    background: #fff;
    background: -moz-linear-gradient( top, #fff 30%, #000 80% );
    background: -webkit-linear-gradient( top, #fff 30%, #000 80% );
    background: -o-linear-gradient( top, #fff 30%, #000 80% );
    background: -ms-linear-gradient( top, #fff 30%, #000 80% );
    background: linear-gradient( to bottom, #fff 30%, #000 80% );
}

Text above can be found here (edit)