在 scss 中使用 math.div 代替 /

Question

需要使用 math.div 而不是斜杠重写此函数。下面给出的 URL 中提到的详细信息。（由于一些格式问题无法在此处发布代码）

jsfiddle 域 + /26ty5aj7

@return #{($px / $base-font-size) + $metric};

Answer 1

这是具有更新语法的函数。确保将@use导入保留在文件的顶部。

@use "sass:math";

@function px2em($px, $metric: 'em', $base-font-size: 16px) {
  @if unitless($px) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
    @return px2em($px * 1px, $metric, $base-font-size);
  } @else if unit($px) == em {
    @return $px;
  }
  $test: #{math.div($px, $base-font-size) + $metric};
  @return $test;
}

// Pixels to rem based on sass-mq
@function px2rem($px) {
  @if unit($px) == rem {
    @return $px;
  }

  @return px2em($px, 'rem');
}