嵌套不能按預期工作

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，你也可以選擇你想測試的版本。