Question

我制作了一个多站点渐变混合，只为@arguments的所有供应商前缀添加*-linear-gradient。当我定义一个有很多停靠点的渐变时，我很生气，在使用mixin时我必须将所有内容放在一行，如下所示：

.gradientMultiple(~'top, rgba(255, 255, 255, 1) 0%, rgba(254, 254, 254, 1) 16%, rgba(252, 252, 252, 1) 36%, rgba(239, 239, 239, 1) 66%, rgba(18, 34, 106, 1) 66%, rgba(13, 31, 136, 1) 84%');

为了便于阅读，我想将函数参数放在多行上，但它会生成一个解析错误：

.gradientMultiple(~'top, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(254, 254, 254, 1) 16%, 
    rgba(252, 252, 252, 1) 36%, 
    rgba(239, 239, 239, 1) 66%, 
    rgba(18, 34, 106, 1) 66%, 
    rgba(13, 31, 136, 1) 84%
');

这是mixin的定义：

.gradientMultiple ( ... ) {
      background-image: -webkit-linear-gradient(@arguments);
      background-image: -moz-linear-gradient(@arguments);
      background-image: -ms-linear-gradient(@arguments);
      background-image: -o-linear-gradient(@arguments);
      background-image: linear-gradient(@arguments);
   }

Answer 1

.gradientMultiple(top,
    rgba(255, 255, 255, 1)  0%,
    rgba(254, 254, 254, 1) 16%,
    rgba(252, 252, 252, 1) 36%,
    rgba(239, 239, 239, 1) 66%,
    rgba( 18,  34, 106, 1) 66%,
    rgba( 13,  31, 136, 1) 84%;);

另见：

0
1
2
最后是3

Answer 2

对于Magnetic ink character recognition当mixin强制您提供字符串或时，您不希望LESS计算参数值，您可以使用一些javascript：< / p>

（免责声明：JS评估现已弃用，可能会在LESS 3/4中删除，因此仅在使用遗留代码时才使用此选项，而其他替代方案不可用）

.keyframes(~`
    "translate, " +
    "50% { transform: translateX(calc(50% - 25px)) } " +
    "100% { transform: translateX(0px) } "
`);

如何将逗号分隔列表作为单个参数传递给mixin

2 个答案: