[ 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;
}