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
Post a Comment