CODEWITHSUNDEEP
csssasscasting
Emin Altan
Emin Altan

Reputation: 3

Scss how convert string to numeric value

I want to perform mathematical operations using the font-size information with the function below. I remove the rem unit information of $font-size using the sass build-in string functions, but then I cannot perform mathematical operations because the value type is string.

Is there a way to convert a string value type to numeric value type in 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";
}

Upvotes: 0

Views: 1623

Answers (2)

north.inhale
north.inhale

Reputation: 511

But if you will have an issue when you are trying to use stripUnit function, like this

🚨 Build failed.

@parcel/transformer-sass: Undefined operation "2.625rem * 16px".
   â•·
93 │                 func.strip-unit($-fs-max) * 
conf.$font-size-root,
   │                 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles/hero.scss 93:5   @use
  src/styles/index.scss 11:1  root stylesheet

  Error: Undefined operation "2.625rem * 16px".
     â•·
  93 │                 func.strip-unit($-fs-max) * 
  conf.$font-size-root,
     │                 
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src/styles/hero.scss 93:5   @use
    src/styles/index.scss 11:1  root stylesheet
      at Object.wrapException 
  (/Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:1269:17)
      at Object.throwWithTrace0 
  (/Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:24245:15)
      at 
  /Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:76529:19
      at _wrapJsFunctionForAsync_closure.$protected 
  (/Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:3939:15)
      at _wrapJsFunctionForAsync_closure.call$2 
  (/Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:29731:12)
      at _awaitOnObject_closure0.call$2 
  (/Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:29725:25)
      at Object._rootRunBinary 
  (/Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:4327:18)
      at StaticClosure.<anonymous> 
  (/Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:103109:16)
      at _CustomZone.runBinary$3$3 
  (/Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:31132:39)
      at _FutureListener.handleError$1 
  (/Users/andrew/Sites/UspioLTD/node_modules/sass/sass.dart.js:29911:21)

In a code like:

$m: 768px;
$xl: 1202px;
$font-size-root: 16px;

@media (min-width: conf.$m) and (max-width: #{conf.$xl - 1}) {
    $-fs-min: 2rem;
    $-fs-max: math.div(42, 16) + rem;

    font-size: func.fluid(
        func.stripUnit($-fs-min) * conf.$font-size-root,
        func.stripUnit($-fs-max) * conf.$font-size-root,
        conf.$m,
        conf.$xl
    );
}

Just add a nuber unit 0 or 1 to your rem, em, px, and etc..., like this: + 0rem, * 1rem.

$m: 768px;
$xl: 1202px;
$font-size-root: 16px;

@media (min-width: conf.$m) and (max-width: #{conf.$xl - 1}) {
    $-fs-min: 2rem;
    $-fs-max: math.div(42, 16) + 0rem;

    font-size: func.fluid(
        func.stripUnit($-fs-min) * conf.$font-size-root,
        func.stripUnit($-fs-max) * conf.$font-size-root,
        conf.$m,
        conf.$xl
    );
}

Now the build is fine!

✨ Built in 2.78s

Upvotes: 0

Arkellys
Arkellys

Reputation: 7790

It would probably be better to use a helper function to remove the unit of $font-size such as this one.

@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";
}

Upvotes: 2

Related Questions