Less CSS different rules in dependency of given variables

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

Have you consider to build a custom PHP pre-processor that automagically generates LESS files starting from some kind of LESS template? — lorenzo-s
– lorenzo-s, Commented May 18, 2012 at 16:06
I think you're working too hard to compact your css output. This is easy enough to solve if you're happy that your font styles are going to be split up in to separate lines for family, size, weight. Let the minimizer do the best it can, and don't worry about it. Or if it really is that important to you, then create two mixins. — GeekyMonkey
– GeekyMonkey, Commented May 21, 2012 at 8:41
The LESS minimizer doesn't merge these statements. I just wanted to know if there was a way to achieve what I wanted in a rather easy way. But you are probably right in saying that it's not that important. — dave
– dave, Commented May 22, 2012 at 12:52

GeekyMonkey · Accepted Answer · 2012-05-21 08:32:23Z

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.

answered May 21, 2012 at 8:32

GeekyMonkey

13.1k6 gold badges36 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dave Over a year ago

My LESS-Files are parsed with NodeJS so this could work. But i can't figure out a way to check if a LESS-Variable is set. "@{p}".length>0?"@{p}":false throws an error if @p isn't set.

GeekyMonkey Over a year ago

You can specify a default value for your mixin parameters. Like .MyMixin(@p: ""). Then test against that default value. See this tinkerbin: tinkerbin.com/VB60OZaI On the tinkerbin you have to change the css format from "plain" to "less" and press RUN.

Collectives™ on Stack Overflow

Less CSS different rules in dependency of given variables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related