Imitation of named variables in LESS (with an example in jsFiddle)

I will not explain what LESS is. But I’ll say a few words.

LESS is a dynamic markup language, the code on which is compiled into standard CSS. LESS uses variables *, operations and functions (non-extensible set), as well as mixins **, which can take parameters. Mixins are replaced by styles when compiled. Operations and functions - the results of calculations.

Problem

When declaring a mixin that accepts parameters, the default values ​​of parameters must be specified. This allows, if desired, to cause a mixin without transferring all or part of the parameters. But mixin in LESS does not yet support named parameters. That is, if the mixin is declared with 10 parameters and you only need to change the value of the tenth in order, you will have to pass the previous nine too. Yes, with default values.
')

Baseline conditions

Markup

<div class="base-1">  "BASE-1" </div> <div class="extension">  "EXTENSION" </div> <div class="base-2">  "BASE-2" </div> 

LESS styles

 /*     - */ .f-border ( @width: 4px, @style: solid, @color: #BE2 ) { border: @width @style @color; } /*     */ .base-1 { .f-border; } /*   c  */ /*      */ .extension { .f-border(4px, solid, #F16); } /*     */ .base-2 { .f-border; } 

Result

Source code in jsFiddle.net ***.

Problem

In the .extension class, the .extension is passed instead of one variable parameter as many as three, two of which coincide with the default values. In this particular case, this is not a problem, since the parameters are quite small. But, for example, in my project related to a complex user interface, the mixin for generating tabs styles (tabs) takes 18 parameters. It is obvious that the advantages of LESS in large projects are greatly depreciated by the absence of named parameters.

Decision

Variables and scope of mixins come to the rescue here. The default parameter values ​​can be transferred to variables. When declaring a mixin, pass in the above variables as default values. Before calling a mixin from any class, change variables for variable parameters. Call the mixin without parameters (or with several parameters in order). Since the variable changes in the scope of the class, the call to the mixin comes with a modified value. When going out of scope, the variables will return to their predefined values.

LESS styles

 /*  */ @f-border-width: 4px; @f-border-style: solid; @f-border-color: #BE2; /*   */ /*  - -  */ .f-border ( @width: @f-border-width, @style: @f-border-style, @color: @f-border-color ) { border: @width @style @color; } /*     */ .base-1 { .f-border; } /*       */ /*     */ .extension { @f-border-color: #F16; .f-border; } /*     */ .base-2 { .f-border; } 

Result

Source code in jsFiddle.net .

Notes:

* On the official LESS website, it is said that “variables are actually constants, since they cannot be redefined”. But there is another point of view .
** Despite the fact that the translation of the original “mixin” as an “admixture” has supporters , borrowing terms together with technology is more organic for the language, since borrowing is identical in meaning, without external contexts.
*** To work with LESS on jsFiddle.net, you need to connect the file less.js through the resources, and add two lines to the javascript editing panel

 document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].type = 'text/less'; less.refreshStyles();