1

我有一个服务，它返回一个可爱的 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 中使用的方式提取颜色吗？我对服务的工作方式很灵活。

4

3 回答 3

2

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

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

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

于 2012-05-18T09:44:56.643 回答
1

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

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

使用您需要的任何变量。

color: @myColor;
background-image: url("/colors?color=@{myColorString}");
于 2012-05-18T08:03:12.257 回答
0

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

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

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

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

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

于 2012-05-17T21:56:11.963 回答