Grunt-Contrib-Compass Not Doing Math - css

Question

I've never used compass before. I've been converting LESS files over to SCSS and including compass. I have a grunt set up that compiles this along with some other tasks I'm using. I had an earlier question about SCSS Math not working using Grunt-Contrib-Sass that got resolved. Now that I'm using Compass to compile my SCSS no Math is being done what so ever. Here is an example of what's being output:
-webkit-border-radius: 50% 50%;
-moz-border-radius: 50% / 50%;
border-radius: 50% / 50%;
display: inline-block;
margin-right: 10/10em;
padding-top: 5/10em;
width: 25/10em;
height: 19/10em;
border: 1px solid #ababab;
color: #ababab;
content: counter(x-counter);
vertical-align: middle;
text-align: center;
font-size: 10/16em;
This is what it's being compiled from:
#include border-radius( 50%, 50% );
display: inline-block;
margin-right: #{10/10}em;
padding-top: #{5/10}em;
width: #{25/10}em;
height: #{19/10}em;
border: 1px solid $mediumgray;
color: $mediumgray;
content: counter(x-counter);
vertical-align: middle;
text-align: center;
font-size: #{10/16}em;
I don't see any options that look like they would take care of this. Has anyone had / resolved this issue?

Answer 1

I'm not sure that you have a full understanding of interpolation in SASS (me neither). Check out the docs here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_
The way I would do this is as follows (irrelevant code omitted):
margin-right: 10/10 * 1em;
padding-top: 5/10 * 1em;
width: 25/10 * 1em;
height: 19/10 * 1em;
font-size: 10/16 * 1em;
This compiles to
margin-right: 1em;
padding-top: 0.5em;
width: 2.5em;
height: 1.9em;
font-size: 0.625em;