css - 如何停止 Sass 在度量单位前添加空格？

Question

我正在尝试按照本教程进行响应式布局设计，但使用 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)) =>语法错误
- ( font-size: (($h1_size)em / 16)=>font-size: 24 em/16;这与我要解决的问题相同

score 32 · Accepted Answer

您可以将推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);
}

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

score 28 · Accepted Answer

您可以使用 + 删除空格

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; }

score 6 · Accepted Answer

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

score 2 · Accepted Answer

2

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

于 2012-06-05T01:36:32.953 回答

4 回答 4