19

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或.colormixin 并动态更改 alpha 透明度。

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

现在——如何从预定义的变量中分别传入 rgb 和 a 部分？

4

3 回答 3

26

事实证明，less 内置了 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);}

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

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

你会得到神奇的、闪亮的透明边框，像这样：http: //i.stack.imgur.com/4jSKR.png

于 2011-03-03T05:03:06.003 回答
19

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);
于 2012-08-15T11:28:18.323 回答
8

您也不需要转换为 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() 的浏览器提供纯色回退。

于 2013-02-02T22:22:34.897 回答