将像素转换为电子版

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) 

要调用手写笔这个凉爽的功能，你只需要输入：

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

如果我理解这是正确的。该函数让我以像素为单位进行思考，但输出全部内容。 现在，我如何在Less中执行相同的功能？ :-)

Answer 1

从Stylus到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的更多信息，请检查here。

下面的代码片段是一个修订版本，我们有一个单独的mixin来完成em/rem转换的px。在这里，我们将根字体大小设置为一个变量（全局范围），然后在每个选择器块（本地范围）内设置父字体大小，并将其作为参数传递给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; 
    } 
}