嵌套不能按预期工作

Question

我想在title类中嵌套h1，但由于某种原因，它只是不想发生。

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

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

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

可能是什么原因？ 我使用C9云IDE与HTML模板，据我所知，它有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和scss，你也可以选择你想测试的版本。