Question

我有一个服务，返回一个可爱的svg渐变用于IE，我正在尝试使用这样的较少mixin -

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

问题是，这些颜色以＃开头，它会截断服务器收到的URL。

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

我曾尝试使用像这样的javascript调用来编码＃的

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

而且我认为除了我在服务器上进行较少的处理之外它会起作用，并且当这样做时它无法评估javascript。

任何想法如何以可在网址中使用的方式提取颜色？我对服务的运作方式很灵活。

Answer 1

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

开头

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

现在，网址总是包含颜色的rgba表示法，我的服务很满意。

Answer 2

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

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

使用您需要的任何变量。

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

Answer 3

你能否将颜色作为字符串而不是颜色传递？所以当你打电话给你的mixin时，它看起来像这样？：

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

如果你需要在其他地方定义颜色的那些颜色，你可以尝试使用反引号在Javascript中解析值。所以它就像是：

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

但是，当你将它们传递给JS时，我不确定这些颜色值是如何看的。它们可能是一个颜色对象，需要转换为字符串。我想我必须尝试一段时间......

如果没有＃，我如何获得LESS的颜色？

3 个答案: