CODEWITHSUNDEEP
htmlcsssassfont-size
cameronliam
cameronliam

Reputation: 247

How to set line-height to font-size plus fixed value for entire project

I have to adjust line heights for an entire existing project. The specification is that all line heights should be the font-size + 4px.

Is there any easy way to accomplish this using scss?

Adjusting based on percentage would be straight-forward, but the fixed value is throwing me off.

Also would I be able to set this globally without having to set this for each class where font-size is altered.

Upvotes: 1

Views: 605

Answers (1)

Hitmands
Hitmands

Reputation: 14179

Yes, there are many way to do that:

  1. $fontSize is a static value defined in px:
$fontSize: 12px;

$lineHeight: $fontSize + 4;
  1. your font-size value is dynamic and must be computed at runtime:
line-height: calc(1em + 4x);

example using calc;

p {
  font-size: 14px; background: yellow;
}

.lh {
  line-height: calc(1em + 4px);
}
<p class="lh">Hello World</p>

Upvotes: 1

Related Questions