Question

我需要Less编译器不转换为rgba（）中定义的HEX颜色，即使alpha通道为1

实际上，以下Less代码：

@color1: rgba(0,0,0,1);
@color2: rgba(0,0,0,0.1);
@color1_light: lighten(@color1,90%);
@color2_light: lighten(@color2,90%);

.a {
  background:@color1;
  color: @color1_light;
}

.b {
  background:@color2;
  color: @color2_light;
}

处理为：

.a {
  background: #000000;
  color: #e6e6e6;
}
.b {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(230, 230, 230, 0.1);
}

但我需要（由于许多原因与进一步的评估有关）

.a {
  background: rgba(0, 0, 0, 1);
  color: rgba(230, 230, 230, 1);
}
.b {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(230, 230, 230, 0.1);
}

如何解决这个问题？

Answer 1

基本上这很简单，所有你要做的就是逃避你的表达，下面你会发现两个例子，即使alpha为1，如何强制较少的编译器显示rgba格式：

@color1: rgba(0,0,0,1);

body {
    color: ~"rgba("red(@color1), green(@color1), blue(@color1),~" 1)";
    background: %(~"rgba(%s, %s, %s, 1)", red(@color1), green(@color1), blue(@color1));
}

这两个示例都会产生rgba(0, 0, 0, 1)，它取决于您喜欢哪一个。我敢打赌，您会在string escape和string replace

下的文档中找到更多信息

// EDIT

是的，这很棘手，但是，你仍然可以用mixin扩展它，所以它在以后的代码中看起来不会很糟糕。

@color1: rgba(0,0,0,1);

.rgba(@color) {
    //@rgba: ~"rgba("red(@color), green(@color), blue(@color),~" 1)";
    @rgba: %(~"rgba(%s, %s, %s, %s)", red(@color), green(@color), blue(@color), alpha(@color));
}

.torgba(@property, @color) {
    @{property}: %(~"rgba(%s, %s, %s, %s)", red(@color1), green(@color1), blue(@color1), alpha(@color1));
}

body {
    .rgba(@color1); // mixin returns @rgba variable that may be used later on, it's not color object however, but a string
    color: @rgba;
    background: @rgba;
    .torgba(border-color, @color1); // do the same, but returns property with color in given format
}

即使alpha通道为1，rgba（）中的颜色也较少

1 个答案: