css - 在微软渐变中使用较少的变量

Question

我在让 .LESS 识别字符串中有一个变量时遇到了一些麻烦。这是我当前的代码

filter: progid:DXImageTransform.microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}', GradientType=0);

@startColor 和 @endColor 都是变量。

如何在字符串中放置 .LESS 变量？

编辑：

我修复了它（我认为..）这是对我有用的结束代码

filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=0);

Answer 1

尝试：

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

tilda 和引号允许您在这种情况下实际转义代码。我也最终使用了我的不透明度东西，但那是因为我想重用这个词opacity作为函数名。

filter: ~"alpha(opacity=@{op})! important" 

Answer 2

最好使用：~"filter" 转义整个过滤器属性，并将 less 变量（不带“@”符号）包裹在大括号中。

我创建了一个 mixins，可以将颜色和不透明度值分别正确地转换为 rgba 和 argb 值：

.rgba(@color, @opacity) {
    @rgba: fade(@color, @opacity);
    @ieColor: argb(@rgba);

    background-color: @rgba;
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{ieColor}', endColorstr='@{ieColor}',GradientType=0)";
}