我似乎无法将更多变量发送到svg-gradient()函数中。 如果我不使用变量,svg-gradient函数可以正常工作。 (除了id的非增量 - 但这完全是另一回事!)或者如果我将完全相同的数据发送到CSS属性,线性渐变(),这与svg-gradient()函数需要的格式相同,它也有效。
任何人都可以告诉我为什么上面和下面代码中的注释行无法成功编译成功吗?
/* Example 1 */
.my-mixin-gradient(@size: contain; @direction: to right; @color...){
background: svg-gradient(@direction, red 0, orange 20%, yellow 30%, green 50%, blue 70%, indigo 85%, violet 100%);
/* background: svg-gradient(@direction, @color); */ /* Why does this not compile ??? */
background: linear-gradient(@direction, @color);
background-size: @size;
}
.my-class{
.my-mixin-gradient(contain; to bottom; red 0, orange 20%, yellow 30%, green 50%, blue 70%, indigo 85%, violet 100%);
}
/* Example 2 */
.my-mixin-gradient2(@size: contain; @mygrad: to right, #000 0, #fff 100%){
background: svg-gradient(to bottom, #ff0000 0, #ffa500 20%, #ffff00 30%, #008000 50%, #0000ff 70%, #4b0082 85%, #ee82ee 100%);
/* background: svg-gradient(@mygrad); */ /* Why does this not compile either ??? */
background: linear-gradient(@mygrad);
background-size: @size;
}
.my-class2{
.my-mixin-gradient2(contain; to bottom, #ff0000 0, #ffa500 20%, #ffff00 30%, #008000 50%, #0000ff 70%, #4b0082 85%, #ee82ee 100%);
}