LESScss converting rgba to hex? how to nest color variables into a mixin?
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?
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
LESS has a set of functions to fade , fadeIn , or fadeOut a color. You should be able to pass any color to these mixins (hsl, rgb, rgba, hex, etc.)
// fade color to 40%
color: fade(#000000, 40);
// fade in color by 10%
color: fadeIn(rgba(0, 0, 0, .5), 10);
// fade out color by 10%
color: fadeOut(rgba(0, 0, 0, .5), 10);
You don't need to convert to hsla either so you won't need a white value
.hexBackgroundToRGBA(@color,@alpha){
@myred:red(@color);
@mygreen:green(@color);
@myblue:blue(@color);
background-color: @color;
background-color: rgba(@myred,@mygreen,@myblue,@alpha);
}
You'll have to write a few of these mixins in you need to set stuff other than the background-color property set but that's the idea. Just call it like this:
#selector{ .hexBackgroundToRGBA(@gray, 0.8); }
That will take whatever color val you have in the @gray variable and output a cross browser solution at 80% transparency with a solid color fallback for browsers that don't support rgba().
链接地址: http://www.djcxy.com/p/15344.html上一篇: RGB或HEX颜色