如何将行高设置为font-size加上整个项目

Question

我必须调整整个现有项目的线高。规范是所有行高应为font-size + 4px。

使用scss有没有简单的方法来实现这个目标？

根据百分比进行调整会很简单，但固定值会让我失望。

我也可以全局设置它，而不必为每个改变font-size的类设置它。

Answer 1

是的，有很多方法可以做到：

1. $fontSize是px中定义的静态值：

$fontSize: 12px;

$lineHeight: $fontSize + 4;

1. 您的font-size值是动态的，必须在运行时计算：

line-height: calc(1em + 4x);

使用calc;

的示例

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

.lh {
  line-height: calc(1em + 4px);
}

<p class="lh">Hello World</p>