Px 到 Em 函数

我们之前讨论过 “为什么用 Ems？”。

对于那些不熟悉 em 值的人，Mozilla 开发者网络 对 em 做了很好的解释。

…一个 em 等于应用于当前元素父元素的字体大小。如果您在页面上没有设置任何字体大小，那么它将是浏览器的默认值，这可能是 16px。因此，默认情况下 1em = 16px，2em = 32px。

如果您仍然喜欢用 px 思考，但喜欢 em 的优点，不需要使用计算器，您可以让 Sass 为您完成这项工作。有很多方法可以使用 Sass 计算 em。

内联数学

h1 {
  font-size: (32 / 16) * 1em;
}

p {
  font-size: (14 / 16) + 0em;
}

注意：我们需要那里的“* 1em”以便 Sass 正确附加单位值。您也可以使用“+ 0em”来达到同样的目的。

结果

h1 {
  font-size: 2em;
}

p {
  font-size: 0.875em;
}

这可以工作，但我们可以让它更容易。

em() Sass 函数

有很多不同的方法来编写这个函数，这个来自 Web Design Weekly 的一篇文章

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em;
}

非常聪明！这个函数使用 Sass 的字符串插值来将 em 附加到值。请注意，$context 参数具有 $browser-context 的默认值（因此，您将此变量设置为的任何值）。这意味着当在 Sass 中调用该函数时，您只需要定义 $pixels 值，并且数学计算将相对于 $browser-context（在本例中为 16px）进行。

示例用法

h1 {
  font-size: em(32);
}

p {
  font-size: em(14);
}

结果

h1 {
  font-size: 2em;
}

p {
  font-size: 0.875em;
}

一个使用数学而不是字符串插值的类似函数，来自 The Sass Way 可以很容易地修改为接受变量，就像我们的字符串插值函数一样

//un-modified

@function calc-em($target-px, $context) {
  @return ($target-px / $context) * 1em;
}

// and modified to accept a base context variable

$browser-context: 16;

@function em($pixels, $context: $browser-context) {
  @return ($pixels / $context) * 1em;
}

另一个使用 Sass 的 unitless() 方法

$browser-context: 16;

@function em($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }

  @if (unitless($context)) {
    $context: $context * 1px;
  }

  @return $pixels / $context * 1em;
}

这使我们可以在函数调用中包含或不包含 px 单位。

h1 {
  font-size: em(32);
}

// is the same as:

h1 {
  font-size: em(32px);
}