使用 em 无需应用除法

Question

这是我使用rem时的规则：

.title-main {
  font-size: 14rem;
  letter-spacing: 9rem;
  margin-bottom: 8rem;
  margin-right: -9rem;
}

由于我需要缩放功能，我将此组件切换为 em:

.title-main {
  font-size: 14em;
  letter-spacing: calc(9em/14);
  margin-bottom: calc(8em/14);
  margin-right: -calc(9em/14);
}

有没有更优雅的方法，我仍然可以用整数指定非字体大小属性？

Answer 1

在我看来，主要问题是您对字体大小值进行了硬编码（在您的示例中为 14）。如果你用SASS，我会这样写代码：

$fontSize: 14;

.title-main {
  font-size: #{$fontSize} + 'em';
  letter-spacing: calc(9em/#{$fontSize});
  margin-bottom: calc(8em/#{$fontSize});
  margin-right: -calc(9em/#{$fontSize});
}

以更有效的方式准确输出您的代码；希望这就是你的意思。

在我的示例中，我将变量放在声明之外（这是最好的方案），但它也可以在声明内部。

使用 em 无需应用除法

Using em without a need to apply division

css

sass