LESS Variables as parametric mixins

134 views Asked by At

I'm relatively new to LESS and I'm trying to figure out a way to have simple code for activating and deactivating OpenType features. I understand what a variable and a parametric mixin is but am not sure how to put them together, if possible.
Other suggestions on how to solve this problem would be greatly appreciated.

/*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);
}
2

There are 2 answers

2
Alessandro Minoccheri On BEST ANSWER

You can use the when conditions in less like this:

@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);
}

or you can try to create a unique function and pass value inside it like this:

.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);
}
3
ScottS On

You can avoid when conditions by just replacing the parameters of the parametric mixins with the actual expected values of 1 or 0.

/*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);
}