Question

I’m specifying font sizes in Ems, which means they’re relative to the parent container. I have several child elements and don’t want to repeat the parent size each time when I do calculations on it. So I have:

@articleFontSize: 21/16;

If, further on, I use:

font-size: @articleFontSizeem;

as you’d expect, I get ‘variable @articleFontSizeem is undefined’.

If I interpolate it:

font-size: @{articleFontSize}em;

then again it refuses to compile and I just get a plain ‘syntax error’.

font-size: @articleFontSize~"em";

This compiles – but in the output I get code like:

font-size: 1.3125 em;

i.e. it’s added a space before the units, so they’re ignored by the browser.

I’m running LiveReload on a Mac (2.0 beta 5) which according to the settings uses ‘System Ruby 1.8.7’ for the compilation.

UPDATED SOLUTIONS:

a. Add a zero amount of the correct units:

font-size: 0em + @articleFontSize;

b. (my earlier alternative method – using a function):

.rFont(@target, @context) {
    @ratio: @target/@context;
    font-size: ~"@{ratio}em";
}

Called with:

.rFont(11,@articleFontSize);

Output (correct, note no unwanted spaces):

font-size: 0.7063571428571428em;

I didn’t expect putting @{ratio} inside tilde+quotes to still expand it. But it works (almost nothing else does.)

This question helped:
concatenate values in less (css) without a space

Answer 1

Try

font-size: 0em + @articleFontSize;