元素选择器中的 SASS 嵌套类选择器不起作用 [重复]答案

【问题标题】：SASS nesting class selectors in an element selector doesn't work [duplicate]元素选择器中的 SASS 嵌套类选择器不起作用 [重复]
【发布时间】：2014-10-21 17:19:42
【问题描述】：

我正在尝试为 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 中漂亮的嵌套功能。

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

是我做错了什么还是这不起作用？

【问题讨论】：

标签： css sass

【解决方案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

【讨论】：