css - 较少的线性梯度滤波器

Question

我有一个混入少的问题。

我有更少的文件。

.gradient(@startColor, @endColor) {
  background: @startColor;
  background: linear-gradient(to bottom, @startColor 0%,@endColor 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColor}', endColorstr='@{endColor}',GradientType=1 );  
}

#nav {
  .gradient(#fff,#e2ebef);
}

.btn {  
  .gradient(#f2f2f2, #e4e4e4);
}

编译后我得到这个：

#nav {
  background: #ffffff;
  background: linear-gradient(to bottom, #ffffff 0%, #e2ebef 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e2ebef', GradientType=1);
}
.btn {
  background: #f2f2f2;
  background: linear-gradient(to bottom, #f2f2f2 0%, #e4e4e4 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e2ebef', GradientType=1);
}

为什么 .btn 的过滤器中的颜色与 #nav 中的颜色相同？我用谷歌搜索了解决方案，但没有找到任何解决这个问题的方法。

那么......除了在生成的css文件中手动粘贴颜色之外，还有另一种解决方案吗？

Answer 1

将过滤器属性更改为如下所示：

filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}', GradientType=1)";

这会自动转义过滤器属性中的许多废话，并允许正确输出该字符串中的变量。