在Less中将px转换为em

Question

什么相当于Scss' emCalc()更少？

padding: emCalc(24px);

在Scss中将根据视点和缩放级别计算em.是否有更少的内置功能？

Answer 1

您可以这样做将px转换为em.

@font-size: 16;         // Your base font-size in pixels
@em: @font-size*1em;    // Shorthand for outputting ems, e.g. "12/@em"
@rem: @font-size*1rem;  // Shorthand for outputting ems, e.g. "12/@rem"

h1{
  font-size: 20/@em;
}

Answer 2

使用LESS,您可以构建自己的功能.我在grunt-contrib-less包中使用了这个函数.格式与通常较少的函数格式略有不同.请注意,您需要在此包中插入less作为参数.

em: function(less, fontsize, basefontsize){
    if (less.functions.functionRegistry.get('ispixel')){
        basefontsize = (basefontsize) ? basefontsize.value : 16
        return fontsize.value/basefontsize+'em';
    }
}

现在你可以在你的LESS样式表中调用这个函数了

.class{
    font-size:em(16px);
}

哪个会编译到

.class{
    font-size:1em;
}

注意ems仍然是相对于容器的css.因此,如果换行div的字体大小设置为0.8em,则1em的字体大小不会是16px.

更新:非grunt-contrib-less版本

如果您将此文件放在javascript文件中,该文件包含在较少文件之前的html中,则可以使用上述功能.

$.extend(less.functions, {
    em: function(fontsize, basefontsize){
        if (this.ispixel(fontsize)){
            basefontsize = (basefontsize) ? basefontsize.value : 16
            return new(tree.Dimension)(fontsize.value/basefontsize,'em');
        }
    }
}