如何在Sass mixin方程中去除计量单位？

Question

我编写了一个非常简单的Sass混合器，用于将像素值转换为rem值（请参见Jonathan Snook关于使用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 mixin中实现这个功能？

- Ray Brown

---

至少 Sass 可以让你使用 rem 作为单位。Less 不认识它，并在我的大小和单位之间添加了一个空格。 - Andrew Philpott

Answer 1

这里有一个你可以使用的函数。基于Foundation全局辅助函数。请参考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;
}

- alettieri

---

如果 $num: 1rem，那么 $num * 0 就是 0rem 而不仅仅是 0，所以总是要有单位。 - Sergej

Answer 2

从数字中去除单位是通过除法来完成的，就像代数中一样。

$base-font-size: 10px;
$rem-ratio: $base-font-size / 1rem;

@mixin rem($key,$px) {
  #{$key}: $px;
  #{$key}: $px/$rem-ratio;
}


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

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

Sass中的单位可以像实际数学一样处理，因此px/px/rem会变成仅为rem。享受它吧！

- Martin Bavio

---

换句话说，除以你想要移除的单位。例如，10像素除以1像素等于10。 - RobW