将单位类型附加到 Sass 中的计算结果

我最近一直在将 CSS 重构为 SASS 样式表。我正在使用Mindscape Web 工作台扩展 http://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a对于 VS2012，每次保存 SCSS 时都会重新生成 CSS。我从类似这样的代码开始：

/* Starting point: */
h1 { font-size: 1.5em; /* 24px ÷ 16px */ }

然后我尝试先将其重构为：

/* Recfator: */
h1 { font-size: (24px / 16px)em; }

但这不幸地产生了：

/* Result: */
h1 { font-size: 1.5 em; }              /* doesn't work, gives "1.5 em" */

注意额外的空间，我不想在那里。我尝试了几种替代方案，这里有一些：

h1 { font-size: (24/16)em; }           /* doesn't work, gives "1.5 em" */
h2 { font-size: 24 / 16em; }           /* doesn't work, gives "24/16em" */
h3 { font-size: (24px / 16px) * 1em; } /* works but "* 1 em" feels unnecessary */
h4 { font-size: (24em) / 16; }         /* works, but without "px" it's not 
                                          really conveying what I mean to say */

我还尝试了这些带有变量的变体（因为无论如何我都想要这些），但这并没有改变情况太多。为了使这个问题中的示例保持简洁，我省略了变量。但是，我很乐意接受依赖于使用变量（以干净的方式）的解决方案。

我已经经历了'/' 上的相关 SASS 文档 http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#division-and-slash，并认识到这对于 SASS 来说是一项艰巨的任务，因为“/”字符在基本 CSS 中已经具有含义。无论哪种方式，我都希望有一个干净的解决方案。我在这里错过了什么吗？

PS. 这篇博文 http://erskinelabs.com/calculating-ems-scss/确实提供了一种解决方案，使用用户定义的函数。不过，这似乎有点沉重，所以我很感兴趣是否有符合我上述尝试的“更干净”的解决方案。如果有人可以解释“函数方法”是更好的（甚至是唯一的）解决方案，那么我也会接受它作为答案。

PS. 这个相关问题 https://stackoverflow.com/q/15513395/419956似乎是同一件事，尽管人们特别想做进一步的计算。那里接受的答案 https://stackoverflow.com/a/15514279/419956是我的第三个解决方法（乘以1em），但如果我愿意放弃进行进一步计算的能力，我很想知道是否有不同的（更干净的）方法。也许上述问题（“插值”）中提到的方法对我有用？

底线：如何干净地附加单位类型（例如em) 到 SASS 中的计算结果？

将单位添加到数字的唯一方法是通过算术.

执行连接等操作（例如1 + px）或插值（例如#{1}px）只会创建一个string that looks就像一个数字。即使您绝对 100% 确定您永远不会在其他算术运算中使用您的值，您不应该这样做.

比无法执行算术运算更重要的是，您将无法将它们与需要数字的其他函数一起使用：

$foo: 1; // a number
$foo-percent: $foo + '%'; // a string

.bar {
    color: darken(blue, $foo-percent); //Error: "1%" is not a number!
}

$amount：“1%”不是“变暗”的数字

将数字转换为字符串不会获得任何好处。始终使用算术（乘以 1，或加以 0）来添加单位：

$foo: 1; // a number
$foo-percent: $foo * 1%; // still a number! //or: $foo + 0%

.bar {
    color: darken(blue, $foo-percent); //works!
}

Output:

.bar {
  color: #0000fa;
}

这是我编写的一个 mixin，作为 Flexbox mixin 库的一部分，如果你传入一个字符串，它就会阻塞（对于那些不熟悉 Flexbox 的人来说，原始规范只允许使用整数作为box-flex财产。flex: auto or flex: 30em无法与同类产品兼容box-flex属性，所以 mixin 不需要尝试）

@mixin flex($value: 0 1 auto, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
    @if $legacy and unitless(nth($value, 1)) {
        @include legacy-flex(nth($value, 1));
    }

    @include experimental(flex, $value, flex-support-common()...);
}

@mixin legacy-flex($value: 0) {
    @include experimental(box-flex, $value, $box-support...);
}