Using math.div instead of / in scss
Need to rewrite this function using math.div instead of slash. Details mentioned in the URL given below.
https://jsfiddle.net/26ty5aj7
@function px2em($px, $metric: 'em', $base-font-size: 16px) {
@if unitless($px) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
@return px2em($px * 1px, $metric, $base-font-size);
} @else if unit($px) == em {
@return $px;
}
@return #{($px / $base-font-size) + $metric};
}
// Pixels to rem based on sass-mq
@function px2rem($px) {
@if unit($px) == rem {
@return $px;
}
@return px2em($px, 'rem');
}
@return #{($px / $base-font-size) + $metric};
Here are your functions with the updated syntax. Make sure to keep the @use
import at the top of your file.
@use "sass:math";
@function px2em($px, $metric: 'em', $base-font-size: 16px) {
@if unitless($px) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
@return px2em($px * 1px, $metric, $base-font-size);
} @else if unit($px) == em {
@return $px;
}
$test: #{math.div($px, $base-font-size) + $metric};
@return $test;
}
// Pixels to rem based on sass-mq
@function px2rem($px) {
@if unit($px) == rem {
@return $px;
}
@return px2em($px, 'rem');
}