如何使用SASS计算变量保留单位？

我尝试创建一些与“接近”像素大小匹配的相对字体大小值：

html { font-size: 62.5%; }

$font-10px: 1em/1.1em;
$font-11px: 1.1em/1.1em;
$font-12px: 12em/11em;

.x10 { font-size: $font-10px; }
.x11 { font-size: $font-11px; }
.x12 { font-size: $font-12px; }

但是，此sass snipet的输出为：

.x10 {
  font-size: 0.90909;
}

.x11 {
  font-size: 1;
}

.x12 {
  font-size: 1.09091;
}

如您所见，该单元（

em

）已被剥离

这将导致不正确的值

---

如何声明变量以包含正确的单位？

如果长度使用相同的单位，则将一个长度除以另一个长度始终会导致删除该单位。因此，您的选择是：

• 使用一个长度和一个整数进行除法：

  1.1em/1.1

• 之后将单位乘以：

  1.1em/1.1em*1em

• 完全不要使用除法：

  1em

---

将PX添加到变量末尾，并用#{}环绕变量。这被称为并将变量视为普通css。插值还有助于删除数字和测量单位之间的任何空格：

$base-font-size: 16;
body  { font-size: (62.5% * base-font-size); }

$font-10px: 1em/1.1em;
$font-11px: 1.1em/1.1em;
$font-12px: 12em/11em;


.x10 { font-size: #{$font-10px}px; }
.x11 { font-size: #{$font-11px}px; }
.x12 { font-size: #{$font-12px}px; }

结果:

.x10 {
   font-size: 0.90909px;
}
.x11 {
   font-size: 1px;
}
.x12 {
   font-size: 1.09091px;
}

---

由于您在SA会谈中提到了可访问性，我建议您在项目中添加一个混合项，以允许使用REM单元，同时还为较旧的浏览器提供向后兼容性。

为什么要这样做。。。曾经每次有人使用

font size:62.5%

时，一只小猫就会死。@cimmanon:实际上，这个规则是从宿主应用程序SharePoint继承的。我不控制更高标签（html、body等）上的规则，但我控制我添加的小部件的css。但是你知道

0.909em！=10px

，对吗？你给自己和其他读到这段代码的人贴上这样的标签是在伤害他们。如果你真的想要10px，就用10px。@cimmanon：我明白。客户考虑像素（由于其网络代理提供的PhotoShop），但我们考虑em以准备应用程序的可访问性♿. 最重要的是，宿主应用程序使用1.1em作为主体字体大小。如果整个应用程序都调整了大小，而不是widget@cimmanon：事实上，我的数学错了。我必须除以13而不是11来接近像素大小。这个答案在现有答案的基础上没有增加任何东西。这也是一种非常不恰当的将整数转换为长度的方法。@Cimmanon，您的答案没有涵盖更广泛的情况，即变量被变量除。这一答复涵盖了所有情况。效率并不重要，因为SASS以任何一种方式预编译到相同的CSS中。