从像素转换为em

Question

我最近看了一篇来自Tutsplus的教程，讲述了如何制作防弹的网页设计。其中，讲师使用Stylus编写了一个非常棒的函数。

$base_font_size = 16

$base_font_size_ems = unit($base_font_size / 16, em)

$px = unit(1 / $base_font_size, rem)

$px_em = unit(1 / $base_font_size, em)

要在 Stylus 中调用这个酷炫的函数，只需键入以下内容：

.button
  font-size: 16 * $px
  border-radius: 3 * $px solid #000

如果我理解正确，该函数让我以像素为单位思考，但输出结果以em为单位。 那么，我如何在Less中实现同样的功能呢？:-)

- Jonas Bröms

---

谢谢你！我需要它在Stylus中。 - user3808307

Answer 1

将Stylus代码转换为Less代码相当简单。相应的Less代码如下：

@base_font_size: 16;
@base_font_size_ems: unit(@base_font_size / 16, em);
@px: unit(1 / @base_font_size, rem);
@px_em: unit(1 / @base_font_size, em);

.button{
  font-size: 16 * @px;
  border-radius: 3 * @px solid #000;
}

请注意，上面的代码只是将您的问题中的代码直接转换，目前始终会得到相同的em和rem值。然而，如果根字体大小和父元素字体大小相同，则em和rem通常是相同的。请查看此处以获取有关em和rem的更多信息。

下面的代码片段是修订版本，其中我们有一个单独的mixin来执行px到em/rem的转换。在这里，我们在变量（全局范围）中设置根字体大小，然后在每个选择器块（局部范围）中设置父字体大小，并作为参数传递给mixin。根据这些，适当输出rem和em值。

@root_font_size: 32;

.rem_em_px_conversion(@parent_font_size: 32){

  @px_rem: unit(1 / @root_font_size, rem);
  @px_em: unit(1 / @parent_font_size, em);
}
.div{
    .rem_em_px_conversion();
    font-size: 16 * @px_em; /* change to 16 * @px_rem for converting to rem */
    border-radius: 4 * @px_em solid #000;
    .button{
      @parent_font_size: 16; /* this is same as parent div font size */
      .rem_em_px_conversion(@parent_font_size);
      font-size: 16 * @px_em;
      border-radius: 4 * @px_em solid #000;
    }
}

- Harry

---

哈哈！我不用告诉你我是新手预处理器... ;)谢谢！ - Jonas Bröms

非常乐意帮忙。我还在更新修订版本的片段，以涵盖px到em和px到rem的转换。请尽可能点击答案左侧的空心勾号（回答者左侧）标记答案为已接受 :) - Harry