Question

我试图在SASS中为div元素嵌套各种类。但是，生成的CSS无法正常工作。我已经阅读了文档，并没有特别提及这样做，所以我不确定我是否做错了。

此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中失去了漂亮的嵌套功能。

具体而言，我正在使用Web Essentials 2013 for Update 3在Visual Studio 2013 Update 3中开发ASP.NET MVC5网站。

我做错了什么或者这不起作用？

Answer 1

在我发布后，我在相关问题中找到了答案：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

元素选择器中的SASS嵌套类选择器不起作用

1 个答案: