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 mixin并动态更改Alpha透明度。

我觉得这应该是可能的，但我错过了一些东西。 - 现在，我的代码只输出一个十六进制颜色值，几乎无论我输入什么.-如果我传入@alpha值为1，它输出一个十六进制颜色值。只有@alpha值小于1会强制浏览器显示rgba值。所以这已经解决了。

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

Answer 1

事实证明，内置的hsla函数较少（参见less color functions）。所以在一些帮助下，这就是我们发现的：

    @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);}

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

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（）的浏览器提供纯色回退。

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

3 个答案: