How to use math.sqrt in SCSS with string value

Question

I use SCSS and have 2 functions:

@function get-size-in-units($size, $unit: px) {
  @return #{$size}#{$unit};
}

@function get-container-size($side) {
   @return math.ceil(math.sqrt(2 * math.pow($side, 2)));
 }

And now i use it like this:

get-size-in-units(get-container-size(40));

Now I have a need for the function get-container-size to work with string value. I mean I want to call it with '40px', '40rem' and etc, not with 40

How can i do this?

Answer 1

First you need to strip units from $side for that create a @function.

@use 'sass:math';

@function stripUnit($number) {
    @return math.div($number, ($number * 0 + 1));
}

Credits for stripUnit function goes to Kitty Giraudel and Miriam Suzanne.

Now use the returned value in your @function

@function get-container-size($side) {
    @return math.ceil(math.sqrt(2 * math.pow(stripUnit($side), 2)));
}

Complete Code

@use 'sass:math';

@function stripUnit($number) {
    @return math.div($number, ($number * 0 + 1));
}

@function get-container-size($side) {
    @return math.ceil(math.sqrt(2 * math.pow(stripUnit($side), 2)));
}

@function get-size-in-units($size, $unit: px) {
    @return #{$size}#{$unit};
}

Then you can use it like :

.container {
    width: get-size-in-units(get-container-size(40px));
}