ruby - 如何从 Sass 混合方程中删除测量单位？

Question

我编写了一个非常简单的 Sass mixin，用于将像素值转换为 rem 值(请参阅 Jonathan Snook 的 article on the benefits of using rems)。这是代码:

// Mixin Code
$base_font_size: 10; // 10px
@mixin rem($key,$px) {
  #{$key}: #{$px}px;
  #{$key}: #{$px/$base_font_size}rem;
}

// Include syntax
p {
  @include rem(font-size,14);
}

// Rendered CSS
p {
  font-size: 14px;
  font-size: 1.4rem;
}

这个 mixin 工作得很好，但我对它的 include 语法有点不满意。看，我宁愿将像素值而不是简单的数字传递到 include 语句中。这是一个小细节，但它会为当前不存在的 include 语句添加语义含义。这是我尝试将像素值传递到 include 语句时得到的结果:

// Include syntax
p {
  @include rem(font-size,14px);
}

// Rendered CSS
p {
  font-size: 14pxpx;
  font-size: 1.4pxrem;
}

一旦 Sass 看到一个像素值被传递到一个方程中，它就会输出“px”。 我想去掉那个度量单位，就像我在 JavaScript 中使用 parseFloat 或 parseInt 一样。如何在 Sass 混入中这样做？

Answer 1

这是您可以使用的功能。基于 Foundation全局辅助函数。

@function strip-unit($num) {

  @return $num / ($num * 0 + 1);
}

示例使用:

... Removed for brevity ...

@mixin rem( $key: font-size, $val ) {
    #{$key}: strip-unit( $val ) * 1px;
    #{$key}: ( strip-unit( $val ) / $base-font-size ) * 1rem;
}