3

前几天，我从 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 中执行相同的功能？:-)

4

1 回答 1

4

从 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;
    }
}
于 2015-05-10T13:28:32.360 回答