Question

I’m comparing capabilities of LESS with Compass(Sass)

To make cross browser transparent background in Compass we can use this method http://aaronrussell.co.uk/legacy/cross-browser-rgba-support/ which can generate transparent image too along with rgba code.

compass-rgbapng plugin for providing cross-browser compatible RGBA
support by creating transparent PNGs on the fly for browsers that
don’t support RGBA. Uses the pure Ruby ChunkyPNG library for hassle
free install and deployment.

sudo gem install compass-rgbapng

require "rgbapng"

@import "rgbapng";


background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

Is it possible to do same with LESS? I think not because LESS is based on JavaScript and JavaScript is not as capable as ruby. Am i right?

Answer 1

Short answer: no.

Long answer: not with just the LESS library.

You can combine the server side plugin with a LESS script. You can make a LESS class that generates the CSS style:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

I’m not sure how that library works, but the only important part i can see is the name of the PNG being the RGBA value hex-encoded. Being just that, I’ve made a LESS script that allows using that URL schema to take advantage of the server-side image builder:

@compass-url: '/images/rgbapng/'; 

.rgba-background(@r, @g, @b, @a) {
    @date-nocache: `new Date().getTime().toString()`;
    @colorInt: floor(@a * 255) + 256 * (@b + (256 * (@g + 256 * @r)));
    @colorHex: `(parseInt("@{colorInt}") + Math.pow(256,4)).toString(16).slice(1,9)`;

    background: "@{compass-url}@{colorHex}.png?@{date-nocache}";
    background: rgba(@r, @g, @b, @a);
}

This scripts creates the class/function rgba-background in LESS, allowing you to anotate your LESS class like:

.yourClass {
    .rgba-background(0,0,0,0.75);
}

If you plan to use this accross multiple less scripts, it would be adviceable to extract it to another file, and use the @import directive wherever you want to use it.

If the URL generated is more complex that i thought, please provide some additional info on how to build that URL, so we can see if this can be resolved using LESS.