Question

Scss'emCalc()的等价物是什么？

padding: emCalc(24px);

Scss中的

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

Answer 1

使用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版本

如果您将此文件放在较小文件之前包含在html中的javascript文件中，则可以使用上述功能。

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

Answer 2

您可以执行此操作将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 3

根据{{3}}，

LESS没有这样的功能。

内置documentation或unit功能不提供此类转换。

请注意，此函数的Scss实现假定使用一个全局字体大小值进行转换。通过使用变量，您可以轻松地在LESS中实现相同的功能：

@em: 16px;    // LESS variable - default value for 1em

然后像这样使用它：

div {
  height: @em;
  width: 6 * @em;
}

以上代码编译为：

div {
  height: 16px;
  width: 96px;
}

请注意，此（以及Scss'版本）也是 convert ，因为在em中指定的CSS维度是根据元素的字体大小计算出来的使用。

Answer 4

如果您正在服务器端编译LESS，而我个人绝不会这样做，您可以使用LESS mixins而不是自定义函数来完成此操作。

这当然意味着你不能根据当前节点的大小自动计算，但是对我来说有点可怕。这是将像素转换为ems的另一种方法。

Global less mixins

@emInPx: 16;    // 16px per em (global default)

.convertEm(@selector, @amt) when (isem(@amt))
{
    @{selector}: @amt;
}
.convertEm(@selector, @amt, @emInPx: @emInPx) when (ispixel(@amt))
{
    @{selector}: unit((@amt / @emInPx), em);
}

使用示例

img.cat
{
    .convertEm(max-width, 5em);
    .convertEm(max-height, 3em);
}
img.dog
{
    .convertEm(max-width, 100px);
    .convertEm(max-height, 75px);
}

请注意，我对像素和ems使用相同的.convertEm(..) mixin，因为您甚至可能不知道该值是否作为参数传递。有保障的mixin正确选择正确的转换公式。

这会生成此css

img.cat {
  max-width: 5em;
  max-height: 3em;
}
img.dog {
  max-width: 6.25em;
  max-height: 4.6875em;
}

这一切都假设1em对应16px。如果没有，您可以更改默认值或传入默认值，具体取决于您所在的上下文：

img.mouse
{
    .convertEm(max-width, 100px, 32px);
    .convertEm(max-height, 75px, 32px);
}

免责声明：我仍然不完全了解服务器生成LESS的工作方式是否可以使用自定义javascript函数，所以我假设在生成服务器端时无法添加自定义函数。如果我错了，请有人告诉我！

Answer 5

如果您在服务器端编译LESS，可以使用CSSHub

执行此操作

/* Test unit convert */
div {
  .unit-convert(font, ~'bold em(14px)/1.2 @{csshub_font-stack-arial}');

  // Ignore base: @csshub_font-size: 100%;
  .unit-convert(margin, ~'rem(18px) rem(20px) rem(15px)', true);

  // Default: 100% == 16px == 1em == 12pt == 1rem
  .unit-convert(font-size, ~'px(100%)');         // Test: % to px
  .unit-convert(font-size, ~'pt(16px)');         // Test: px to pt
  .unit-convert(font-size, ~'em(12pt)');         // Test: pt to em
  .unit-convert(font-size, ~'rem(1em)');         // Test: em to rem
  .unit-convert(font-size, ~'percent(1rem)');    // Test: rem to %
}

这会生成此css

/* Test unit convert */
div {
  font: bold 0.875em/1.2 Arial, 'Helvetica Neue', Helvetica, sans-serif;
  margin: 1.125rem 1.25rem 0.9375rem;
  font-size: 16px;
  font-size: 12pt;
  font-size: 1em;
  font-size: 1rem;
  font-size: 100%;
}

Answer 6

此处显示了另一个变体。

CTRL+C

来源：https://gist.github.com/dominicwhittle/66275e9014bec7ec1b6f

Answer 7

以上示例都不适合我，因此我最终对其进行了更改，并且可以正常工作：

@basefontsize: 14px;

.em(@fontsize, @basefontsize: @basefontsize) {
  @result: if(ispixel(@fontsize), unit(unit(@fontsize)/unit(@basefontsize), em),@fontsize)
}

.my-class {
  font-size: .em(16px)[];
  padding-bottom: .em(14px)[];
  padding-top: .em(14px, 16px)[];
  margin-top: .em(32px)[];
  margin-left: .em(2em)[];
  margin-bottom: .em(4rem)[];
}

结果：

.my-class {
  font-size: 1.14285714em;
  padding-bottom: 1em;
  padding-top: 0.875em;
  margin-top: 2.28571429em;
  margin-left: 2em;
  margin-bottom: 4rem;
}

在Less中将px转换为em

7 个答案:

Global less mixins

使用示例