SCSS如何将字符串转换为数字值

Question

我想使用以下功能使用字体大小的信息执行数学操作。我使用SASS Build-In String函数删除rem $ font-size的单元信息，但是我无法执行数学操作，因为值类型是字符串。

有没有办法将字符串值类型转换为SASS中的数字值类型？

@use "../abstracts/variables" as *;
@use "sass:math";

@function em($value, $font-size) {
   
  $length: str-length(#{$font-size}); //sample-think about it font-size 1.125rem

  $trim: ($length - 3);

  $data: str-slice(#{$font-size}, 1, $trim);

  $result: math.div($value, $data);

  @return $result + "em";
}

Answer 1

最好使用助手函数删除$ font-size的单位，例如此。

@function stripUnit($number) {
    @if meta.type-of($number) == "number" and not math.is-unitless($number) {
      @return math.div($number, $number * 0 + 1);
    }
 
    @return $number;
}

@function em($value, $font-size) {
  $data: strip-unit($font-size);
  $result: math.div($value, $data);

  @return $result + "em";
}

Answer 2

但是，如果您尝试使用 stripunit 功能时会遇到问题，则在这样