LESS svg-gradient() function with multiple variables

不羁岁月 提交于 2019-12-11 05:03:59

问题


I cannot seem to send multiple variables to the svg-gradient() function in less. If I don't use variables, the svg-gradient function works fine. (Except for the non-increment of ids - but that's something else entirely!) Or if I send the exact same data to the CSS property, linear-gradient(), which is the same format that the svg-gradient() function requires, it works also.

Can anyone tell me why the commented lines in the code below are not successfully compiling when the ones above and below are succesful?

/* 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%);
}

来源:https://stackoverflow.com/questions/26424473/less-svg-gradient-function-with-multiple-variables

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!