如何为渐变变量的止损点做一个较少的混合？

Question

我为渐变找到的所有较少的混合器都只有固定的止损数。在使用f逗号时，less和css之间的冲突使得变量停止不可能以同样的方式完成。

用于双向渐变的当前混合器

.gradient (@origin: left, @step-1: @white,  @step-2: @black, @fallback: @step-1){
    background-color: @fallback;
    background: -webkit-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
    background:    -moz-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
    background:    -ms-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
    background:      -o-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
    background:         linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
}

三条路

    .gradient-3-way (@origin: left,  @step-1: @white,  @step-2: @black,  @step-3: @white, @fallback: @step-1){
        background-color: @fallback;
        background: -webkit-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
        background:    -moz-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
        background:      -ms-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
        background:      -o-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
        background:         linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
    }

Answer 1

不需要单独的变量

您所需要做的就是确保您使用分号作为参数的分隔符，即使这恰好是您要传递的一个参数。因此，这是可行的：

减

@white: #fff;
.gradient (@origin: left, @fallback: @white,  @stops){
    background-color: @fallback;
    background: -webkit-linear-gradient(@origin, @stops) @fallback no-repeat;
    background:    -moz-linear-gradient(@origin, @stops) @fallback no-repeat;
    background:    -ms-linear-gradient(@origin, @stops) @fallback no-repeat;
    background:      -o-linear-gradient(@origin, @stops) @fallback no-repeat;
    background:         linear-gradient(@origin, @stops) @fallback no-repeat;
}

.test {
   .gradient(@stops: #fff 0, #000 20px, #000 20px, #f00 20px;)
}                                                           |
                                                    this final semicolon 
                                                    causes the commas to 
                                                    become list separators
                                                    instead of parameter
                                                    separators making the whole 
                                                    thing part of one variable

CSS输出

.test {
  background-color: #ffffff;
  background: -webkit-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
  background: -moz-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
  background: -ms-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
  background: -o-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
  background: linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
}

Answer 2

您必须使用一个单独的变量将梯度样式拉到mixin调用中。

 @grady: right, #fff 0, #000 20px, #000 20px, #f00 20px;
.red{.gradient-multi (@grady);}
.gradient-multi (@grad: right){
    background: -webkit-linear-gradient(@grad) no-repeat;
    background:    -moz-linear-gradient(@grad) no-repeat;
    background:    -ms-linear-gradient(@grad) no-repeat;
    background:      -o-linear-gradient(@grad) no-repeat;
    background:         linear-gradient(@grad) no-repeat;
}