CODEWITHSUNDEEP
cssless
Aj Troxell
Aj Troxell

Reputation: 265

LESS Mixin for Line-height

I am using this mixin to generate rem font-size with fallback pixel sizes, but to also generate a line-height that is 1.5 times the 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 that is requires me to enter a value for my line-height, although it will not be needed once compiled. My LESS using this mixin is as such:

.font (13, 10);

And results in this outpu:

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

Is there a way to rework this mixin so that it will output a line-height that is 1.5 times my font-size, without needing to enter a value?

Upvotes: 1

Views: 2795

Answers (1)

Aj Troxell
Aj Troxell

Reputation: 265

Found the solution. For now it seems that using a @string value works without requiring any more value than the 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;

Upvotes: 2

Related Questions