css - 奇怪的 sass 行为，错误？

Question

我正在将我的 css 更改为 sass 并且遇到了一些非常奇怪的事情，.jumbotron 的高度不会改变，而它被放置在 css 中。我尝试了一些东西，结果得到了更奇怪的东西。

结果不同

.jumbotron
  margin-top: -5em
  width: 80vw
  overflow: hidden
  background-color: rgb(250,250,250)
  height: 90em

和

.jumbotron
  margin-top: -5em
  width: 80vw
  overflow: hidden
  background-color: rgb(250,250,250)
  height: 90em

.jumbotron
  height: 90em

第一个由于某种原因不影响高度，而第二个影响高度，我也尝试将第一个 .jumbotron 中的代码放在第二个中，但问题又来了。

为什么会这样？

Answer 1

我的sass版本是3.4.22。第一个案例的编译输出是给我的:

.jumbotron {
  margin-top: -5em;
  width: 80vw;
  overflow: hidden;
  background-color: #fafafa;
  height: 90em; }

第二个:

.jumbotron {
  margin-top: -5em;
  width: 80vw;
  overflow: hidden;
  background-color: #fafafa;
  height: 90em; }

.jumbotron {
  height: 90em; }

这是您要接收的 CSS 吗？你的输出 CSS 是什么？也许在第二种情况下，您正在 .jumbotron 的第一个和第二个声明之间用 height 更改某些内容，这意味着您在第一种情况下覆盖了高度？

尝试使用开发人员工具调试样式。检查哪些规则影响高度。检查浏览器是否正确“看到”您的 CSS。代码图可能会有用。