元素選擇器中的SASS嵌套類選擇器不起作用

我正嘗試在SASS中嵌套div元素的各個類。但是，生成的CSS無法正常工作。我已經閱讀了文檔，沒有具體提到這樣做，所以我不確定我是否做錯了什麼。元素選擇器中的SASS嵌套類選擇器不起作用

這SASS代碼：

div { 
    //various page elements 
    .page_header { 
     clear: both; 
     float: left; 
     color: $text-color-light; 
     background-color: #2C3E50; 
    } 

    .page_header_title { 
     clear: left; 
     float: left; 
    } 
}

結果在下面的CSS：

div .page_header { 
    clear: both; 
    float: left; 
    color: #ECF0F1; 
    background-color: #2C3E50; } 
div .page_header_title { 
    clear: left; 
    float: left; }

當我第一次看到生成的CSS我看不出有任何理由爲什麼它是行不通的。但是我不得不錯過一些有關CSS選擇器如何分離的知識，因爲它在Chrome中完全不會影響頁面。當我改變它時，選擇器被定義爲div.page_header和div.page_header_title這個CSS可以正常工作，但是我失去了SCSS漂亮的嵌套功能。

具體來說，我正在開發的Visual Studio 2013更新3與網頁要點2013年更新3

的ASP.NET MVC5網站難道我做錯了什麼或者這只是不去上班？

來源

2014-08-27 Mike D.

我找到了答案中的相關問題，一個在一旁我張貼後：Sass .scss: Nesting and multiple classes?

我需要使用&與父母選擇在SCSS以確保選擇器連接在一起，而不是分開的。

這SASS代碼的工作：

div { 
    //various page elements 
    &.page_header { 
     clear: both; 
     float: left; 
     color: $text-color-light; 
     background-color: #2C3E50; 
    } 

    &.page_header_title { 
     clear: left; 
     float: left; 
    } 
}

和結果在適當的CSS輸出：

div.page_header { 
    clear: both; 
    float: left; 
    color: #ECF0F1; 
    background-color: #2C3E50; } 
div.page_header_title { 
    clear: left; 
    float: left; }

更多信息可以在這裏找到：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

來源

2014-08-28 00:05:58

元素選擇器中的SASS嵌套類選擇器不起作用

回答

相關問題