如何停止 Sass 在度量单位前添加空格？ [复制]答案

【问题标题】：How do I stop Sass adding spaces before units of measurement? [duplicate]如何停止 Sass 在度量单位前添加空格？ [复制]
【发布时间】：2012-06-09 01:34:37
【问题描述】：

我正在尝试关注 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)) => 语法错误
- (font-size: (($h1_size)em / 16) => font-size: 24 em/16; 这与我正在尝试解决的问题相同

【问题讨论】：

标签： css sass

【解决方案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);
}

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

【讨论】：

啊哈，你发现了我刚刚在更新中提出的问题。乘以 1em 是个不错的技巧 :)
我也喜欢乘以 1em。感觉在数学上是正确的。

【解决方案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; }

【讨论】：

是的，这是正确的方法
我同意，您可以通过 #{$variable}em 进行插值，但插值不像这种方法那么简单，这才是您真正想要的。
这应该是公认的答案！
为什么会这样？

【解决方案3】：

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

这是参考：http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

【讨论】：

【解决方案4】：

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

【讨论】：