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 want it to be in rgba.

this doesn't work, but here's the idea:

.bgcolor(@colorvariable,@alpha) {
     background-color: @colorvariable + rgba(0, 0, 0, @alpha);
     }

Where @colorvariable would be, @blue: rgb(17,55,76); or @green: rgb(125,188,83); etc.

I want to define a bunch of these variables, and then be able to pass them in to .bgcolor or .color mixin and change the alpha transparency on the fly.

I feel like this should be possible, but I am missing something. -Right now, my code only ever outputs a hex color value, almost no matter what I input.- If I pass in an @alpha value of 1, it outputs a hex color value. Only @alpha values less than 1 force the browser to show me an rgba value. So that's solved.

Now--how to pass in the rgb and a parts separately from a predefined variable?

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