使用＆符号引用父选择器，而不是

Question

文章here展示了使用＆符引用父选择器的绝佳示例，如下所示：

h3 {
  font-size: 20px;
  margin-bottom: 10px;

  .some-parent-selector & {
    font-size: 24px;
    margin-bottom: 20px;
  }
}

这可以按预期工作。但是，我遵循BEM原则并且不希望压倒Sass。正如您在下面的屏幕截图中看到的那样，.js-tabby中的样式会覆盖默认的.tabs代码。

我尝试过这样的事情：

.tabs {
  display: none;
  visibility: hidden;

  .js-tabby &:not(&) {
    display: none;
    visibility: hidden;
  }

  .js-tabby & {
    display: block;
    visibility: visible;
  }
}

但是，它不起作用。

Answer 1

当我写这个问题时，我有一个看似疯狂的想法，但它有效！所以，这是我的第一个Q＆amp; A 永远：

.tabs {    
  html:not(.js-tabby) & {
    display: none;
    visibility: hidden;
  }

  html.js-tabby & {
    display: block;
    visibility: visible;
  }
}

我正在使用的插件将.js-tabby类附加到html元素，因此我将其定位为BOOM！它有效。

长期以来，这一直困扰着我，我希望能够挽救别人的进一步挫败感。