Less mixins

font-face.less

.font-face(@fontname, @fontfile, @fontweight:normal, @fontstyle:normal) {
    font-family: "@{fontname}";
    src: url("@{fontfile}.eot");
    src: url("@{fontfile}.eot?#iefix") format("embedded-opentype"),
         url("@{fontfile}.woff") format("woff"),
         url("@{fontfile}.ttf") format("truetype"),
         url("@{fontfile}.svg#@{fontname}") format("svg");
    font-weight: @fontweight;
    font-style: @fontstyle;
}

@font-face {
    .font-face(font-family-name, 'font/adresse/without/extension');
}

font-unit.less

// .font-size.rems http://clearleft.github.io/clearless/#typography
.font-size-rems(@px-size){
    @rem-size: @px-size / @base-font-size;
    font-size: ~"@{px-size}px";
    font-size: ~"@{rem-size}rem";
}

// .element { .font-size-rems( 12 ) }

// .font-size.ems http://clearleft.github.io/clearless/#typography
.font-size-ems(@target-px-size, @context-px-size:@font-size-base) {
    font-size: (@target-px-size / @context-px-size) * 1em;
}

// .element { .font-size-ems( 12) }

retina.less

// voir aussi : https://gist.github.com/brandonb927/3874012 et http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html
.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {

    @hdimedia : ~"only screen and (-webkit-min-device-pixel-ratio: 2)",
              ~"only screen and ( min--moz-device-pixel-ratio: 2)",
              ~"only screen and ( -o-min-device-pixel-ratio: 2/1)",
              ~"only screen and ( min-device-pixel-ratio: 2)",
              ~"only screen and ( min-resolution: 192dpi)",
              ~"only screen and ( min-resolution: 2dppx)";

    background-image: url("@{file-1x}");

    @media @hdimedia {
        background-image: url("@{file-2x}");
        background-size: @width-1x @height-1x;
    }

}

// .element { .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); }

rgba.less

// .rgba http://dan.cx/blog/2012/05/rgba-in-ie
.rgba(@colour, @alpha) {
    @alphaColour: hsla(hue(@colour), saturation(@colour), lightness(@colour), @alpha);
    @ieAlphaColour: argb(@alphaColour);

    background-color: @colour; // Fallback for older browsers
    background-color: @alphaColour;

    // IE hacks
    background-color: transparent\9;
    zoom: 1; // hasLayout
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 8+
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 6 & 7

}

// .element { .rgba(#000000, 0.5); }