Trying to perform a division operation on a SASS variable (which is a map value) by two, like this:
$grid-gutter-widths: (
xs: 30px,
sm: 30px
...
);
$col-padding-xs: #{map-get($grid-gutter-widths, xs)/2}; // returns 15px
div {
padding-right: $col-padding-xs / 2; // returns 15px/2
}
Expected the padding-right value to be 7.5px, but it doesn't perform the division and instead displays a string with a slash in the middle. Surprisingly, the following does work:
$col-padding-xs: 15px;
div {
padding-right: $col-padding-xs / 2; // returns 7.5px
}
So it seems like the map value might be the wrong type. Is there an easy way to convert it to a number so that simple math operations can be performed in SASS?
Thank you for your assistance!