Sohnee Sohnee - 4 months ago 19
Less Question

Generate Multiple Outputs Based on Different Mixins

I have a set of LESS files, for example:

variables

.someMixinName() {
font-family: Arial, sans-serif;
font-weight: normal;
}



  • variables.less

  • theme.less



The variables contains a mixin for the font (for example), and I want to create an alternate version of exactly the same stylesheet, except for the font mixins.

variables

.someMixinName() {
font-family: Arial, sans-serif;
font-weight: normal;
}


variables-alt

.someMixinName() {
font-family: Georgia, serif;
font-weight: bold;
}



  • variables.less

  • variables-alt.less

  • theme.less



I have attempted to simplify this as much as possible - I'm looking for a technique for using different sets of variables against a single LESS file.

Is there a way to generate two CSS files based on
theme.less
, one for each of the two sets of variables?

Answer

One solution you can use against a single LESS file is the idea of Parent Selectors

With parent selectors you can apply differing rules based on parent elements or attributes. Attributes in this instance could then be used on a parent element - be it the immediate parent or something more global like the body tag.

Then with your mixin .someMixinName() you can reference different parent rules:

So

.someMixinName() {
    font-family: Arial, sans-serif;
    font-weight: normal;
}

Can become:

.someMixinName() {

    body:not([data-text="Georgia"]) & {
        font-family: Arial, sans-serif;
        font-weight: normal;
    }

    body[data-text="Georgia"] & {
        font-family: Georgia, serif;
        font-weight: bold;
    }
}

To trigger the differing rules above you would then have a body tag as follows for Georgia:

<body data-text="Georgia">

results in css of :

font-family: Georgia, serif; font-weight: bold;

then anything that is not 'body data-text="Georgia"' results in Arial font:

<body data-text="something else">

or

<body>

results in css of:

font-family: Arial, sans-serif;
font-weight: normal;
Comments