[ sass/scss ] 自定义函数 去单位 px转em

去单位

在使用scss过程中，一直会有个疑惑它的内部是如何运作的。实际上它的运作与现实生活中一直。如果你想要移除一个值的单位，你想要将它除以1单位。比如 50cm 我想取它的数字，那么我们除以1cm，得到结果是 50(由1cm x 50 = 50cm得出)。同理这个原理也适用于scss。

$number: 50px;
$value: $number / 1px;
// -> 50

由上面的原理写出以下scss function：

/// 单位移除
/// @param {Number} $number - 需要移除单位的
/// @return {Number} - 无单位的数字
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

这个计算可能看起来很奇怪，但实际上是有道理的。为了得到 $number 的1单位，我们可以将 $number 乘以 0，然后再加 1。

使用：

$number: 50px;
$value: strip-unit($number);
// -> 50

扩展： px转em

/// px 转 em
/// @param {Number} $target-size px 值
/// @param {Number} $context 继承的字体大小
/// @return {Number} 对应以em单位的值
@function px2em($target-size, $context: $base-font-size) {
  @if not unitless($target-size) {
    $target-size: strip-unit($target-size);
  }
  @if not unitless($context) {
    $context: strip-unit($context);
  }
  @return ($target-size / $context) * 1em;
}