LESS: Change on-the-fly passed parameter through Mixin call

Question

I have a LESS Mixin called in different stylesheets (i.e. one for each breakpoint controlled by media queries). In each stylesheet it is called with different parameter value such as:

• "mobile.less":

  .mixin(1);

• "tablet.less":

  .mixin(2);

  .....

The mixin is defined (for example) as:

.mixin(@parameter) when (@parameter = 1)
{
    body
    {
      font-style:italic;
    } 

    .......

}

.mixin(@parameter) when (@parameter = 2)
{
    .......
}

I'm developing a demo website so I wish that users could change this values on-the-fly changing value that is passed as parameter using a form field.

I tried the following method:

less.modifyVars({'@parameter' : <value from form field>});

But it would work only if @parameter is a "global" variable, not a passed parameter through the call...... Is there a method to change also passed parameters?

Thank you.

Answer 1

Original Answer

Yes, just make the variable outside the scope of the mixins but still use it in the guard expression. Something like:

@parameter: 1;

.mixin() when (@parameter = 1)   {
    body  {
      font-style:italic;
    }   
}

.mixin() when (@parameter = 2)   {
    body  {
      font-style:normal;
    } 
}

.mixin();

This generates the 1 code. If the variable gets set to 2, it generates the 2 code, etc.

Discussion of "re-process on the fly called mixins"

With reference to your comment, to my knowledge there is no way to directly re-process the local variable of a mixin call without doing something to the mixin definition itself to allow for it. So in your example, if "mobile.less" has a .mixin(1); call, how can you reprocess it to be, say, .mixin(4) based on user input. If you have not set up the call with a variable to begin with, then there is not way to "modify" the 1 in the original call. However, setting up with a variable call to begin with is really just a longer version of the answer I give above. Consider that this code essentially does the same as the above, only with more coding involved:

LESS Mixins Defined

.mixin(@parameter) when (@parameter = 1)   {
    body  {
      font-style:italic;
    }   
}

.mixin(@parameter) when (@parameter = 2)   {
    body  {
      font-style:normal;
    } 
}

Calls it in Files

//mobile.less
@parameter: 1;
.mixin(@parameter);

//tablet.less
@parameter: 2;
.mixin(@parameter);

Notice that we are still working with a "global" @parameter variable that is just being passed in as a "local" variable of the same name to the mixins. So all we gain here is more code (the addition of the local variable) to do the same thing.

Now assuming you are really after modifying the final output css behavior through the user input, then you may be able to "override" by a later call. This assumes that all the same properties, selectors are set by the various mixin calls, just to different values. So let us assume .mixin(1) is still in "mobile.less", you could set up a "reset.less" file that is called on user input to override by the css cascade.

LESS Mixin Definition Added

.mixin(@parameter) when (@parameter = 0)   {
    //purposefully empty, used as default for reset.less
}

Calls in your current "mobile.less" etc. remain as they are. You can have a global value of @parameter: 0; set in your global "variables.less" file, and then "reset.less" is this:

//reset.less
.mixin(@parameter);

That way "reset.less" outputs nothing by default (using the mixin definition just done above). This "reset.less" file is put last in the html processing so that it follows any "mobile.less" stylesheets, etc. Then, when the user changes @parameter, the "reset.less" is updated with the new values, and it does output css, which, by virtue of the css cascade, overrides the values of "mobile.less" etc.