@use 'sass:math'; // =============== Custom function ============================== // convert string number to int or double @function to-number($value) { @if type-of($value) == 'number' { @return $value; } @else if type-of($value) != 'string' { @error 'Value for `to-number` should be a number or a string.'; } $result: 0; $digits: 0; $minus: str-slice($value, 1, 1) == '-'; $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); @for $i from if($minus, 2, 1) through str-length($value) { $character: str-slice($value, $i, $i); @if (index(map-keys($numbers), $character) or $character == '.') { @if $character == '.' { $digits: 1; } @else if $digits == 0 { $result: $result * 10 + map-get($numbers, $character); } @else { $digits: $digits * 10; $result: $result + map-get($numbers, $character) / $digits; } } } @return if($minus, -$result, $result);; } // convert px to rem @function rem($size) { $size : $size+ ""; $remSize: math.div(to-number($size), 16); //Default font size on html is 16px; @return #{$remSize}rem; } // convert px to em @function em($size) { $size : $size+ ""; $remSize: math.div(to-number($size), 16); @return #{$remSize}em; } // convert pt to rem @function pt-rem($size) { $size : $size+ ""; $pxSize: to-number($size) * 1.328147; $remSize: $pxSize / 16; @return #{$remSize}rem; } // convert pt to em @function pt-em($size) { $size : $size+ ""; $pxSize: to-number($size) * 1.328147; $remSize: $pxSize / 16; @return #{$remSize}em; }