如何在测量单位之前停止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;
}

不幸的是,sassCSS格式的输出如下所示:

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;这是我正在努力修复的问题

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