/* 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 */
我也试过这些变量与变量(因为我想要那些反正)，但是没有改变的情况。为了保持这个问题的例子时尚我已经遗漏了变量。但是，我很乐意接受一个依赖于使用变量(以干净的方式)的解决方案。
我经历了relevant SASS documenation on ‘/’，并欣赏这是一个艰难的一个为SASS，因为’/’字符已经在基本CSS中有意义。无论如何，我希望一个干净的解决方案。我在这里缺少什么？
PS。 This blogpost提供一个解决方案，使用用户定义的功能。这似乎有点重量虽然，所以我有兴趣，如果有“更清洁”解决方案符合我的尝试以上。如果有人可以解释“函数方法”是更好的(或者甚至只有)解决方案，那么我会接受这个答案。
PS。 This related question似乎是相同的事情，虽然一个特别想做进一步的计算。 The accepted answer there是我的第三个解决方法(乘以1em)，但我想知道如果有一个不同的(更干净的)方式，如果我愿意放弃进行进一步计算的能力。也许上述问题(“插值”)中提到的方法对我有用吗？
底线：如何清洁地将单位类型(例如em)附加到SASS中的计算结果？
解决方法
要执行连接(例如，1 px)或插值(例如。#{1} px)等操作，只会创建一个看起来像数字的字符串。即使你绝对100％确定你永远不会使用你的值在另一个算术运算，你不应该这样做。
除了不能执行算术运算之外，您不能将它们与任何其他期望数字的函数一起使用。
$foo: 1; // a number
$foo-percent: $foo + '%'; // a string
.bar {
color: darken(blue,$foo-percent);
}
$amount: “1%” is not a number for `darken’
这里是一个mixin我写作为我的FlexBox mixin库中的一部分，如果你传递一个字符串(对于那些不熟悉FlexBox，原始规范只允许整数的Box-flex属性，flex：auto或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,$Box-support...); }
将数字转换为字符串没有什么可以获得。始终使用乘法添加单位：
$foo: 1; // a number
$foo-percent: $foo * 1%; // still a number!
.bar {
color: darken(blue,$foo-percent);
}
输出：
.bar {
color: #0000fa;
}
