Question

我正在尝试关注响应式布局设计this tutorial，但使用SASS / SCSS作为我的基本规范语言。

为此，我定义了以下SCSS：

body {
  font: 100%/1.5;
}

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16)em;
  line-height:(28 / $h1_size)em;
  margin-top: (24 / $h1_size)em;
}

不幸的是，sass到CSS格式的输出如下所示：

h1 {
  font-size: 1.5 em;
  line-height: 1.167 em;
  margin-top: 1 em;
}

- 将单位与空格分开。 Chrome拒绝这些值为无效，只有在我自己手动删除空格时才会使用它们。

有没有办法通过调整我的SCSS或将选项传递给sass来解决此问题？

到目前为止，我已经尝试过：

将单位放在计算中：
- （font-size: ($h1_size / 16em)）=＆gt; 语法错误
- （font-size: (($h1_size)em / 16) =＆gt; font-size: 24 em/16; 这是我正在尝试修复的问题

Answer 1

您可以将em推送到$h1_size定义，这样您就可以简单地除以16，并在ems中得到结果。

如果分区的两边都在em，那么你的结果将是无单位的。如果需要，您可以轻松地乘以1em以恢复您的单位。

h1 {
  $h1_size: 24em;
  font-size: ($h1_size / 16);
  line-height:(28em / $h1_size);
  margin-top: (24em / $h1_size * 1em);
}

乘以1em也可以使您更接近原始示例作品。您通常可以保持单位无效，然后在您希望单位出现时只乘以1em。这避免了我的第一个例子中的一些无意义的em扩散：

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16 * 1em);
  line-height:(28 / $h1_size);
  margin-top: (24 / $h1_size * 1em);
}

哪种方式更有意义主要取决于您的输出主要是在一个单元中，还是各种不同的单元（包括没有单元）。

Answer 2

您可以使用+

删除空格

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16)+em;
  line-height:(28 / $h1_size)+em;
  margin-top: (24 / $h1_size)+em;
}

将输出。

h1 {
  font-size: 1.5em;
  line-height: 1.16667em;
  margin-top: 1em; }

Answer 3

你需要像这样使用字符串插值：＃{$ variable} em

Answer 4

将em放入变量中，$h1_size: 24em;