LESS mixin中参数的单引号

时间:2012-10-04 17:42:19

标签: css internet-explorer css3 less gradient

我正在尝试在LESS(使用JS版本)中执行此操作: -

.gradient-horizontal (@from, @to, @fallback)
{    
    background: -webkit-gradient(linear, left top, right top, from(@from), to(@to)); /* for webkit browsers */
    background: -moz-linear-gradient(left,  @from,  @to); /* for firefox 3.6+ */

    filter:      progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@from', endColorstr='@to'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@from', endColorstr='@to')"; /* IE8 */
}

它似乎适用于Firefox和Chrome,如果我用IE文字颜色替换@from和@to,它可以正常工作,但正如你在上面看到的那样看起来像是@from和@to正在当被单引号包围时,未经修改地通过。但是,如果没有它们,IE代码将无法运行。

有解决方法吗?

1 个答案:

答案 0 :(得分:3)

这似乎有效: -

.gradient-horizontal (@from, @to, @fallback)
{   

    background: @fallback; /* for non-css3 browsers */
    background: -webkit-gradient(linear, left top, right top, from(@from), to(@to)); /* for webkit browsers */
    background: -moz-linear-gradient(left,  @from,  @to); /* for firefox 3.6+ */

    filter:  ~"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='@{from}', endColorstr='@{to}')"; /* IE6 & IE7 */
    -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@{from}', endColorstr='@{to}')"; /* IE8 */
}