嵌套并不像预期的那样工作

Question

我想在h1课程中嵌套title，但出于某种原因，它并不想发生。

.title {
  display: flex;
  overflow: hidden;
  align-items: center;
  h1 {
    color: #717171;
    font-size: 500%;
  }
}

检查元素时，h1上面没有任何属性。 当我使用下面的代码时，一切正常。

.title h1 {
  color: #717171;
  font-size: 500%;
}

可能是什么原因？ 我正在使用带有HTML模板的C9云IDE，据我所知，它有SCSS预处理器。

Answer 1

如果它是sass，那么你的语法是错误的，sass和scss有不同的语法。

你的风格应该像：

.title 
  display: flex
  overflow: hidden
  align-items: center
  h1 
    color: #717171
    font-size: 500%

并且scss就像你已经拥有的那样：

.title {
  display: flex;
  overflow: hidden;
  align-items: center;
  h1 {
    color: #717171;
    font-size: 500%;
  }
}

你总是可以在sassmeister检查你的sass语法错误，这个网站可以检查sass和scss，你也可以选择你要测试的版本。