Question

我的标记让我们说：

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

我的scss将是

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

只要我将孩子的样式嵌套在父母的标记类中，＆符号（＆amp;）规则就不会参与。但如果我写：

  .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;
    }
  }
}

将输出vanilla CSS：

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

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

Answer 2

其他选择是使用变量和SASS’s Interpolation Syntax，使用它可以保留原始嵌套

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

输出：

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

在SASS中，后置选择器＆符号在嵌套结构中使用时不起作用

2 个答案: