Less 将转义颜色值传递给mixin

使用less的变量，我有一个当前的样式指南，它可以帮助站点保持一致的外观

@black: #000000;
@darkGrey:#343434;
@grey: #a1a1a1;
@lightGrey: #e5e5e5;
@white: #ffffff;

我也在使用一个参数化的mixin，就像这样

.curve (@color: white){background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' width='100%25' height='100%25' %3E%3Cpath fill='@{color}' stroke='transparent' d=' M 0,100 C 20,0 80,100 100,0 L 100,100 '%3E%3C/path%3E%3C/svg%3E");

输出一条小的水平s形曲线

目前有两个问题正在发生。由于使用的是url（），因此颜色必须是单字或转义的十六进制颜色。第二个问题是无法在mixin上使用我的变量

因此：

---

我有点不知所措，我觉得有一个简单的解决方案我错过了。有多个默认值的mixin会更好吗？我可以简单地使用我当前的mixin吗（希望使用变量）？

.curve（%（escape（@grey））

为什么不干脆强制在该mixin中转义，例如，对于任何一种颜色格式都可以。只是对我当前的解决方案不满意，正在寻找一个更优雅的解决方案，而你的解决方案就是！

.curve() // works
.curve('%23a1a1a1') // works
.curve(black) // works - using css's own colors
.curve(@grey) // doesn't work - # not encoded to %23
.curve(escape(@grey)) // doesn't work

@color:escape(@grey);
.curve('@{color}'); // works