SCSS/SASS 删除输出上的 CSS 行？

问题描述

我想了解为什么我的 .scss 文件中的一行被从生成的 .css 文件中删除。

.grid1 {
  display: -ms-grid;  // Why is this removed from the output?
  display: grid;
}
.grid2 {
  display: grid;
  display: -ms-grid;  // although nothing is removed here (as I expected)
}

结果：

.grid1 {
  display: grid; }

.grid2 {
  display: grid;
  display: -ms-grid; }

如果这很重要，我正在使用 node-sass 4.14.1

编辑：

这显然是因为我们在 package.json 的 browserslist 中排除了 IE，所以它不是 SASS 的东西。

谢谢大家的回答

解决方法

这是因为您将 display 的 .grid1 标记的值更改为 display: grid 的下一行代码中的 .grid1。因此，请尝试在 display: -ms-grid 之后添加行 display :grid。

让我解释一下你的代码：

.grid1 {
  display: -ms-grid; /* Here this line is being ignored as its value is changed on the next line of the code */
  display: grid;

}
.grid2 {
  display: grid;  /* Here this line is being ignored as its value is changed on the next line of the code */
  display: -ms-grid;
}

注意实际上相同（忽略 display:.. 中的第一个 .grid2 行。我的意思是在 .grid2 中，display: grid 被忽略，因为 { {1}} 知道 display 将在下一行更改值。

我的猜测是因为根据不同浏览器对规则的期望，它希望供应商前缀样式规则是第一个，如果它存在的话。由于大多数浏览器都知道如何解释 display: grid，它会抛出 display: -ms-grid，除非您特别强制浏览器首先处理它。

也可能只是 node-sass 中的一个错误。

node-sass sass sass