Question

我想使用变量简化线性渐变的LESS / CSS。

我试过（声明变量）：

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);

我尝试过（定义函数并将其与类（＆＃34; .BWTable-hover＆＃34;）和选择器结合起来）

        .BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > td,
    .BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > th {
        background: url(data:image/svg+xml;base64,PD...g==);
        background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
        background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4545484d', endColorstr='#73000000',GradientType=0 ); /* IE6-8 */
    }

结果：＆＃34; ParseError：无法识别的输入＆＃34;

顺便问一下，解决这个问题的好方法是什么？ Ty帮助。

Answer 1

使用参数mixin（带输入参数的mixin）时，编译时不会直接生成输出。必须从另一个区域内调用它。这就是您的代码出错的原因。

引自Sitepoint上的文章：

Mixins可以参数化，这意味着他们可以参数增强其实用性。不输出参数mixin本身编译时它的属性只有在混合到另一个时才会出现块。

相反，你可以通过以下方式实现。 Click here用于演示。

.hover(@BWTableHoverLineMarkerColor1){
 & > tbody > tr:hover > td,
    & > tbody > tr:hover > th {
        background: url(data:image/svg+xml;base64,PD...g==);
        background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
        background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
        @startcolor: argb(@BWTableHoverLineMarkerColor1); /* To convert the rgba value to hex format */
        @endcolor: argb(fade(@BWTableHoverLineMarkerColor1,45%)); /* To increase alpha for end color */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startcolor}', endColorstr='@{endcolor}',GradientType=0 ); /* IE6-8 */
    }
}

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);
.BWTable-hover{
  .hover(@BWTableHoverLineMarkerColor1);
}

另一方面，如果它不是参数化的mixin，你可以简单地完成如下：

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);
.BWTable-hover > tbody > tr:hover > td,
.BWTable-hover > tbody > tr:hover > th {
    background: url(data:image/svg+xml;base64,PD...g==);
    background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
    background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4545484d', endColorstr='#73000000',GradientType=0 ); /* IE6-8 */
}

请注意，上述内容不带参数，因此无法重复使用。

具有LESS函数的线性梯度，LESS.JS - ＆gt; “无法识别的输入”

1 个答案: