元素选择器中的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嵌套类选择器不起作用

回答

相关问题