Background Opacity with support back to IE7 using LESS CSS

opacity.less

/* .bg-opacity() = the workhorse background opacity mixin.  takes 2 sets of
 * RGB plus opacity making a grand total of 7 params.
 * Usage: .alert-box{ .bg-opacity(0,0,0,255,255,255,.75); }
 */
.bg-opacity (@r1: 0, @g1: 0, @b1:0, @r2: 0, @g2: 0, @b2:0, @opacity: .5) {

    // convert RGB to HEX for IE mixin
    // notice ~ escaping and ` for JS evaluation
    @topHex: ~`((1 << 24) + (@{r1} << 16) + (@{g1} << 8) + @{b1}).toString(16).slice(1)`;
    @bottomHex: ~`((1 << 24) + (@{r2} << 16) + (@{g2} << 8) + @{b2}).toString(16).slice(1)`;
    
    background: rgba(@r1, @g1, @b1, @opacity);

    background-image: -webkit-gradient(
                linear, left top, left bottom, from(rgba(@r1, @g1, @b1, @opacity)),
                to(rgba(@r2, @g2, @b2, @opacity))
            );

    background-image: -moz-linear-gradient(rgba(@r1, @g1, @b1, @opacity) 0%,
                rgba(@r2, @g2, @b2, @opacity) 100%
            );
    

    // .lt-ie9 represents a class applied to body for browsers <= IE8
    // '&' represents the parent, thus the selector = .lt-ie9 .bg-opacity
    // This pattern enables the defining of IE conditional support within the mixin
    .lt-ie9 & {
        .bg-opacity-ie(@topHex, @bottomHex, @opacity);
    }
}


.bg-opacity-ie (@top, @bottom, @opacity) {
    background: transparent;

    // convert opacity value to hex
    @hexOpacity: `Math.floor(@{opacity} * 255).toString(16)`;

    filter: ~`"progid:DXImageTransform.Microsoft.gradient(startColorstr=" + "#" + @{hexOpacity} + "@{top}, endColorstr=" + "#" + @{hexOpacity} + "@{bottom}" + ")"`;

    zoom: 1;    // required for filters

}