Less/mixins

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; -ms-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% ); -moz-filter: grayscale( 100% ); -ms-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%); transition: translate(12px, 50%); }

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

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

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

// output: .foo { background: @end-color; background: -moz-linear-gradient( left, #fff 0%, #000 100% ); background: -webkit-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% ); }

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

// output: .foo { background: #000; background: -moz-linear-gradient( top, #fff 0%, #000 100% ); background: -webkit-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% ); }