Question

我使用Drupal FortyTwo theme.主题提供了一个名为PXTOEM的mixin：

//  PXTOEM
//  Calculate percentage with font-size as context
@function pxtoem($pixels...) {
  $result: '';

  @each $item in $pixels {
    $result: $result + ($item + 0) / $default-font-size + em + ' ';
  }

  @return #{$result};
}

在我的scss file中，我使用它：

.header-menus {
  padding: pxtoem(0, $grid-gutter-width);
}

但是在编译后它没有得到正确的输出？

padding: 0/pxem 0.75/pxem; (see screenshot)[![Screenshot][2]][2]

Answer 1

而不是+ 0，您应该添加像素：+ 0px。而不是+ em使用+ 0em Sassmeister demo。
如果您无法修改主题的源代码，请创建自己的函数。

$default-font-size: 16px;

//  PXTOEM
//  Calculate percentage with font-size as context
@function pxtoem($pixels...) {
  $result: '';

  @each $item in $pixels {
    $result: $result + ((($item + 0px) / $default-font-size) + 0em) + ' ';
  }

  @return #{$result};
}

.header-menus {
  padding: pxtoem(0, 30, 30px);
}

Css输出：

.header-menus {
  padding: 0em 1.875em 1.875em ;
}

Mixin（PXTOEM）在CSS输出中提供错误

1 个答案: