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