LESScss将rgba转换为hex？如何将颜色变量嵌入mixin中？

Question

LESScss是否将所有rgba颜色转换为十六进制值？

我正在尝试创建一个mixin,例如.color,它允许您传入之前定义的颜色变量,我希望它在rgba中.

这不起作用,但这里的想法是:

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

哪里@colorvariable会是这样,@blue: rgb(17,55,76);或者@green: rgb(125,188,83);等

我想定义一堆这些变量,然后就能通过他们到.bgcolor或.color混入和更改动态阿尔法透明度.

我觉得这应该是可能的,但我错过了一些东西. - 右现在,我的代码永远只能输出一个十六进制颜色值,几乎不管我input.-如果我通过在1的@alpha值时,输出一个十六进制颜色值.只有@alpha值小于1会强制浏览器显示rgba值.所以这就解决了.

现在 - 如何将rgb和一部分与预定义变量分开传递？

Answer 1

事实证明,内置的hsla函数较少(参见较少的颜色函数).所以在一些帮助下,这是我们发现的:

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

然后使用mixin:

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

所以我们通过在颜色变@dkblue少的功能,如hue(@color)需要@dkblue,拉出它的色调,饱和度和亮度值.然后我们可以传入我们在mixin中定义的alpha.

然后我可以用其他方式使用它,比如定义透明边框.通过添加background-clip: padding-box;到.colorize_bg我确保我的边框显示在bg框颜色之外(不是CSS3神奇？)然后我可以重新定义mixin以用于边框颜色:

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

然后section通过mixin 给出边框宽度,样式和定义颜色:

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

你会得到神奇闪亮的透明边框,如下所示:http://i.stack.imgur.com/4jSKR.png

Answer 2

LESS具有一组功能fade,fadeIn或fadeOut颜色.您应该能够将任何颜色传递给这些mixins(hsl,rgb,rgba,hex等)

// 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);

Answer 3

您不需要转换为hsla,因此您不需要白色值

.hexBackgroundToRGBA(@color,@alpha){
  @myred:red(@color);
  @mygreen:green(@color);
  @myblue:blue(@color);
  background-color: @color;
  background-color: rgba(@myred,@mygreen,@myblue,@alpha);
}

你需要编写一些这些mixin,你需要设置除background-color属性集之外的东西,但这就是想法.只需将其称为:

#selector{  .hexBackgroundToRGBA(@gray, 0.8); }

这将采用@gray变量中的任何颜色值,并输出80%透明度的跨浏览器解决方案,并为不支持rgba()的浏览器提供纯色回退.