sasscompass-sassscss-mixins

How to use math.sqrt in SCSS with string value


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?


Solution

  • 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));
    }