LESS 变量作为参数混合答案

【问题标题】：LESS Variables as parametric mixinsLESS 变量作为参数混合
【发布时间】：2013-12-22 23:11:54
【问题描述】：

我对@987654321@ 比较陌生，我正在尝试找到一种方法来使用简单的代码来激活和停用 OpenType 功能。我了解什么是变量和参数 mixin，但如果可能的话，我不确定如何将它们组合在一起。
非常感谢有关如何解决此问题的其他建议。

/*Variables for enabling and disabling feature*/
@on: 1;
@off: 0;

/*Turn on feature*/
.liga (@on){
    -moz-font-feature-settings:"liga" 1; 
    -ms-font-feature-settings:"liga" 1; 
    -o-font-feature-settings:"liga" 1; 
    -webkit-font-feature-settings:"liga" 1; 
    font-feature-settings:"liga" 1;
}

/*Turn off feature*/
.liga (@off){
    -moz-font-feature-settings:"liga" 0; 
    -ms-font-feature-settings:"liga" 0; 
    -o-font-feature-settings:"liga" 0; 
    -webkit-font-feature-settings:"liga" 0; 
    font-feature-settings:"liga" 0;
}

/*Sample use*/
p{
    .liga(@on);
}

【问题讨论】：

标签： css variables less mixins opentype

【解决方案1】：

您可以使用when 条件，而不是这样：

@onoff:1;
.liga(@onoff) when (@onoff = 1) {
    -moz-font-feature-settings:"liga" 1; 
    -ms-font-feature-settings:"liga" 1; 
    -o-font-feature-settings:"liga" 1; 
    -webkit-font-feature-settings:"liga" 1; 
    font-feature-settings:"liga" 1;
}

.liga(@onoff) when (@onoff = 0) {
    -moz-font-feature-settings:"liga" 0; 
    -ms-font-feature-settings:"liga" 0; 
    -o-font-feature-settings:"liga" 0; 
    -webkit-font-feature-settings:"liga" 0; 
    font-feature-settings:"liga" 0;
}


p{
    .liga(@onoff);
}

或者您可以尝试创建一个独特的函数并在其中传递值，如下所示：

.liga(@value){
        -moz-font-feature-settings:"liga" @value; 
        -ms-font-feature-settings:"liga" @value; 
        -o-font-feature-settings:"liga" @value; 
        -webkit-font-feature-settings:"liga" @value; 
        font-feature-settings:"liga" @value;
    }

p{
    .liga(1); //or .liga(0); or .liga(@on); or .liga(@off);
}

【讨论】：

在这种情况下，我会选择第二个并将值传入。
是的，我已经展示了两种使用情况......但在这种情况下我同意你的观点，第二种更适合 OP 范围 @ScottS

【解决方案2】：

您可以通过将参数混合的参数替换为1 或0 的实际预期值来避免when 条件。

/*Variables for enabling and disabling feature*/
@on: 1;
@off: 0;

/*Turn on feature*/
.liga (1){ /*<-------CHANGED HERE */
    -moz-font-feature-settings:"liga" 1; 
    -ms-font-feature-settings:"liga" 1; 
    -o-font-feature-settings:"liga" 1; 
    -webkit-font-feature-settings:"liga" 1; 
    font-feature-settings:"liga" 1;
}

/*Turn off feature*/
.liga (0){ /*<-------CHANGED HERE */
    -moz-font-feature-settings:"liga" 0; 
    -ms-font-feature-settings:"liga" 0; 
    -o-font-feature-settings:"liga" 0; 
    -webkit-font-feature-settings:"liga" 0; 
    font-feature-settings:"liga" 0;
}

/*Sample use*/
p{
    .liga(@on);
}

【讨论】：

在我看来 1 或 0 可以直接传递到 mixin 中，所以不是 2，而是 1 就足够了。 .liga(@val) 然后 -moz-font-feature-settings:"liga" @val;
@Huangism：是的，这是 Alessandro Minoccheri 的第二个答案（我很喜欢），但我只是在这里提供另一种可能性。
这是解决问题的另一种方法，我喜欢在参数函数中使用变量来使其更具动态性，但这只是@Huangism 的观点