Mixin (PXTOEM) 在 CSS 输出中提供错误

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

您应该添加像素 + 0px 而不是 + 0。而不是 + em 使用 + 0em.
萨斯迈斯特 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 输出中提供错误

Mixin (PXTOEM) provides error in CSS output

sass

mixins

drupal-7