Search code examples
cssvariableslessmixinsopentype

LESS Variables as parametric mixins


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

Solution

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