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

Question

我尝试创建一些匹配＆＃34;几乎＆＃34;的相对字体大小值。像素大小：

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）已被剥离。

这会导致值不正确。

我应该如何声明我的变量包含正确的单位？

Answer 1

如果长度使用相同的单位，则将一个长度除以另一个长度始终会导致单元被移除。所以你的选择是：

• 使用一个长度和一个整数除以：1.1em / 1.1
• 之后将设备重新加倍：1.1em / 1.1em * 1em
• 根本不使用分部：1em

Answer 2

将PX添加到变量的末尾，并使用＃{}包围变量。这称为interpolation #{ }，并将变量视为普通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演讲中提到了可访问性，我建议您将此blog post by Hugo Giraudel中的一个mixin添加到项目中以允许使用REM单元，同时还为旧浏览器提供向后兼容性。