无需额外做除法运算使用em单位的更优雅CSS实现方案

方案1：纯CSS自定义属性实现（无构建依赖） #

通过统一设置基准变量复用除法逻辑，仅需修改一处即可调整全局基准值，兼容性支持所有现代浏览器。

.title-main {
  /* 定义字体大小基准值，和你设置的font-size数值保持一致即可 */
  --fs-base: 14;
  font-size: calc(var(--fs-base) * 1em);
  /* 非字体属性直接传入原来的整数值，不需要重复写除法逻辑 */
  letter-spacing: calc(9em / var(--fs-base));
  margin-bottom: calc(8em / var(--fs-base));
  margin-right: calc(-9em / var(--fs-base));
}

如果有多个同类组件，可以将--fs-base定义到:root或者公共类名下全局复用，无需重复定义。

方案2：CSS预处理器函数实现（开发体验最优） #

如果项目使用Sass/Less等预处理器，可以通过全局封装转换函数，完全不用手动写calc和除法逻辑，直接传入原来的整数值即可。

Sass 示例：

// 全局定义转换函数，默认基准值可按项目规则调整
@function toEm($value, $base: 14) {
  @return calc(#{$value}em / #{$base});
}

// 业务代码，直接传原整数值即可
.title-main {
  font-size: 14em;
  letter-spacing: toEm(9);
  margin-bottom: toEm(8);
  margin-right: toEm(-9);
}

Less 示例：

// 全局定义转换函数
.toEm(@value, @base: 14) {
  return: calc(~"@{value}em / @{base}");
}

// 业务代码
.title-main {
  font-size: 14em;
  letter-spacing: .toEm(9);
  margin-bottom: .toEm(8);
  margin-right: .toEm(-9);
}

编译后的代码和手动编写的calc逻辑完全一致，没有额外性能损耗。

内容的提问来源于stack exchange，提问作者AlwaysLearning