css - LESS Mixin for Line-height -



css - LESS Mixin for Line-height -

i using mixin generate rem font-size fallback pixel sizes, generate line-height 1.5 times font-size.

.font(@size: 16px, @line: @size) { @remfont: (@size / 10); @remline: (@size / 10) * 1.5; font-size: @size * 1px; font-size: ~"@{remfont}rem"; line-height: @size * 1.5px; line-height: ~"@{remline}rem"; }

the negative is requires me come in value line-height, although not needed 1 time compiled. less using mixin such:

.font (13, 10);

and results in outpu:

font-size: 13px; font-size: 1.3rem; line-height: 19.5px; line-height: 1.9500000000000002rem;

is there way rework mixin output line-height 1.5 times font-size, without needing come in value?

found solution. seems using @string value works without requiring more value singular. mixin:

.font(@string) { @remfont: (@string / 10); @remline: (@string / 10) * 1.5; font-size: @string * 1px; font-size: ~"@{remfont}em"; line-height: @string * 1.5px; line-height: ~"@{remline}em"; }

stylesheet usage:

.font (14);

output:

font-size: 14px; font-size: 1.4em; line-height: 21px; line-height: 2.0999999999999996em;

css preprocessor less

Comments

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -