CODEWITHSUNDEEP
variableslesssubtraction
Sjeiti
Sjeiti

Reputation: 2648

LESS variable changes depending on context?

I'm trying to set the shorthand font value (related question), but the variable I'm using for line-height is behaving weirdly; as if the variable is re-interpreted each time. This is in LESS version 1.4.2

.info {
    @infoHeight: 22px;
    @infoTopPadding: 2px;
    @infoLineHeight: @infoHeight - @infoTopPadding;
    margin: @infoLineHeight;
    font: bold 13px~'/'@infoLineHeight Arial, sans-serif;
}

Results in:

.info {
    margin: 20px;
    font: bold 13px / 22px - 2px Arial, sans-serif;
}

So the same variable results in two different values depending on context. Is this intended behavior or could this be a bug?

Upvotes: 0

Views: 75

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21214

in Less >= 1.4.0 you need to use math operations in brackets by default (thats's by design, but can be changed in the Less settings). Your code would work perfectly fine in older versions of Less.

So if you write in Less:

.info {
    @infoHeight: 22px;
    @infoTopPadding: 2px;
    @infoLineHeight: (@infoHeight - @infoTopPadding);
    margin: @infoLineHeight;
    font: bold 13px~'/'@infoLineHeight Arial, sans-serif;
}

the CSS output becomes:

.info {
  margin: 20px;
  font: bold 13px / 20px Arial, sans-serif;
}

I hope this is your desired/expected outcome.

Upvotes: 1

Related Questions