LESS 变量作为参数混合

Posted 2023-03-15

【中文标题】LESS 变量作为参数混合

【英文标题】：LESS Variables as parametric mixins

【发布时间】：2013-12-22 23:11:54

【问题描述】：

我对@9​​87654321@ 比较陌生，我正在尝试找到一种方法来使用简单的代码来激活和停用 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);

【参考方案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 的观点