如何停止Sass在度量单位之前添加空格？[重复]

神无2020-03-24

我试图按照本教程中的响应式布局设计进行操作，但是使用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;这是我要解决的相同问题

神无小胖Pro2020/03/24 14:15:04

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

哪种方法更有意义，主要取决于您的输出将大部分是一个单位，还是各种不同的单位（包括无）。

小胖Gil2020/03/24 14:15:04

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

老丝2020/03/24 14:15:04

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

蛋蛋猿2020/03/24 14:15:04

您可以使用+删除空格

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

Newest Answer