如何在没有#的情况下在 LESS 中获得颜色？答案

【问题标题】：How do I get a color in LESS without the #?如何在没有#的情况下在 LESS 中获得颜色？
【发布时间】：2012-05-17 14:51:04
【问题描述】：

我有一个服务，它返回一个可爱的 svg 渐变以在 IE 中使用，我正在尝试将它与这样的更少的 mixin 一起使用 --

.Gradient(@start, @stop) {
  background-image: url("/imageService/GradientSvg?startColor=@{start}&endColor=@{stop}");
}

问题是，这些颜色以#开头，会截断服务器接收到的url。

我需要一种在没有# 的情况下获取颜色的方法。我不介意它是 RGB 值，还是没有前缀的十六进制值。

我曾尝试使用这样的 javascript 调用对 # 进行 url 编码

  background-image: url(`"/shop/image/GradientSvg?startColor=@{start}&endColor=@{stop}".replace("#","%23")`);

而且我认为它会起作用，只是我在服务器上发生的处理较少，并且这样做时它无法评估 javascript。

有什么想法可以以一种可以在 url 中使用的方式提取颜色吗？我对服务的运作方式很灵活。

【问题讨论】：

标签： less

【解决方案1】：

这是我想出的解决方案。我使用颜色函数来应用一点点透明度。这确保我总是以 RGBA 颜色结束，而不是以 # 开头。

.Gradient(@start, @stop) {
  @startRgb: fadeout(@start,1%);
  @stopRgb: fadeout(@stop,1%);
  background-image: url("/ImageService/GradientSvg?startColor=@{startRgb}&endColor=@{stopRgb}");

url 现在总是包含颜色的 rgba 符号，我的服务很满意。

【讨论】：

【解决方案2】：

如果您不介意每种颜色有两个变量，可以使用color 函数来转换字符串：

@myColorString: "FFD700";
@myColor: color("#@{myColorString}");

使用您需要的任何变量。

color: @myColor;
background-image: url("/colors?color=@{myColorString}");

【讨论】：

谢谢，但这是一个通用的梯度混合。我希望能够灵活地传递任何类型的颜色，甚至是 RGBA。

【解决方案3】：

您可以将颜色作为字符串而不是颜色传递吗？所以当你调用你的 mixin 时，它看起来像这样？：

.Gradient("000000", "FFFFFF");

如果您需要将这些颜色定义为其他地方的颜色，您可以尝试使用反引号来解析 Javascript 中的值。所以它会是这样的：

@noHash: ~`"@{start}".substring(1)`;

不过，当您将这些颜色值传递给 JS 时，我不确定它们的外观。它们可能是颜色对象，需要转换为字符串。我想我得试一试……

【讨论】：

谢谢。脚本的事情会奏效的。在我的示例中，我只是将 # 替换为 %23，这样它就不会混淆不以 # 开头的 rgba 颜色。