What is the simplest way to divide a variable in SASS?

Question

I would like to divide a SASS variable (which is a map value) by two, as follows:

$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
}

Unfortunately I was expecting padding-right value to be 7.5px however it doesn't perform the division and instead returns a string with the slash in the middle. However this seems to work:

$col-padding-xs: 15px;

div {
  padding-right: $col-padding-xs / 2; // returns 7.5px
}

So the map value must be the wrong type. Is there an easy way to cast it as a number so I can perform simple math on it in SASS?

Thanks for your help!

Answer 1

You are very close. It's a matter of the interpolation on the map-get that you have to remove. You can see the codepen for the compiled css.

$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 7.5px
}