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