较少线性梯度滤波器

Question

I have a problem with mixin in less.

I less file I have.

.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);
}

After compile i get this:

#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);
}

Why in the .btn's filter there is the same color as in a #nav? I have googled for sulution, but didn't find anything which solves this problem.

So... Is there another solution than pasting manually colors in generated css file?

Answer 1

Change the filter property to read as such:

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

This automatically escapes much of the nonsense in the filter property and allows for the variables within that string to be output correctly.