在 SASS 中，在嵌套结构中使用后选择器与号不起作用

Question

我的标记是让我们说：

<div class="container marker">
  <div class="parent">
    <div class="child">
      content
    </div>
  </div>
</div>

我的 scss 将是

.container {
  .parent {
    .child {
      .marker & {
        background: red;
      }
    }
  }
}

只要我将子样式与标记类嵌套在父样式中，与号 (&) 规则就不会起作用。但如果我写：

  .parent {
    .child {
      .marker & {
        background: red;
      }
    }
  }

一切似乎都很好。为什么？我错过了什么？

CodePen 中的示例：http ://codepen.io/anon/pen/GgRvOV

Answer 1

因为你的 sass 的输出是：

.marker .container .parent .child {
  background: red;
}

因为你告诉 sass 输出.marker &，它说这是这个链的父级，所以.container被视为.marker.

你需要做：

.parent {
  .child {
    .container.marker & {
      background: red;
    }
  }
}

这将输出香草 CSS：

.container.marker .parent .child {
  background: red;
}

帮助您了解 sass 输出方式的一个很好的工具是http://sassmeister.com/

Answer 2

其他替代方法是使用变量和SASS\xe2\x80\x99s Interpolation Syntax，使用它将保留原始嵌套

\n\n

.container {\n  $c: &;    // store parent into variable\n  .parent {\n    .child {      \n      #{$c}.marker & {\n        background: red;\n      }\n    }\n  }\n}\n

\n\n

输出：

\n\n

.container {\n  $c: &;    // store parent into variable\n  .parent {\n    .child {      \n      #{$c}.marker & {\n        background: red;\n      }\n    }\n  }\n}\n

\n