LESScss converting rgba to hex? how to nest color variables into a mixin?

Question

Does LESScss convert all rgba colors to hex values?

I am trying to create a mixin, say, .color, that allows you to pass in a color variable previously defined, and I wan

Answer 1

Turns out, less has hsla functions built in (see less color functions). So with some help, here's what we discovered:

    @dkblue: #11374c;
    .colorize_bg(@color: @white, @alpha: 1) {
           background: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}

Then use the mixin:

section {.colorize_bg(@dkblue,1);}

So we pass in the color variable @dkblue and less' functions like hue(@color) take @dkblue and pull out its hue, saturation, and lightness values. We can then pass in an alpha that we define in that mixin.

Then I can use it in other ways, like to define transparent borders. By adding background-clip: padding-box; to .colorize_bg I ensure that my borders show outside of the bg box color (isn't CSS3 magical?) Then I can redefine the mixin to work for border color:

    .colorize_border(@color: @white, @alpha: 1) {border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}

and then give section the border width, style, and define color via the mixin:

section {border-width: 0 10px; border-style: solid; .colorize_border(@dkblue, .5);

And you'll get magical, shiny transparent borders, like so: http://i.stack.imgur.com/4jSKR.png