Question

I know that there is no if/else in LESS CSS and use-cases where if/else would be needed are meant to be solved using guarded mixins.

I would like to have a config file for my CSS, in which i can configure font-size, font-family, font-weight and line-height.
I also want to have the possibility to not define one of the above properties.

That’s problem number one. Is there a possibility to check if a variable is existent?
I am using invalid values to define properties which shouldn’t be set (like numbers for font-family)

Now I want to create CSS in dependence of the given values.
If all 4 are given:

font: @font-weight @font-size~'/'@line-height @font-family;

If there is no @font-family given:

font-size: @font-size;
font-weight: @font-weight;
line-height: @line-height;

And so on.

Having a mixin for every possible combination seems very bloated an plain stupid.

That’s problem no. 2.

So actually i want this to work:

@font-size: 1em;
@font-weight: bold;
@font-family: Arial, sans-serif;

body {
  .myMixin(@font-weight, @font-size, @line-height, @font-family);
}

Should output:

body {
  font: bold 1em Arial, sans-serif;
}

Any ideas for solving this?
Or do you think that what i am trying to do is generally a bad idea? If yes, why?

~dave

Answer 1

IF the LESS is being evaluated on the client through javascript, then it can contain javascript code by using back ticks. In the script you can check for a blank value and build up a string as the output.

You cant do this javascript evaluation if your using Less.NET and converting to CSS on the server.