使用 & 字符和 :not 引用父选择器答案

【问题标题】：Referencing parent selectors using the ampersand character, and :not使用 & 字符和 :not 引用父选择器
【发布时间】：2015-12-12 02:09:42
【问题描述】：

文章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;
  }
}

但是很可惜，它不起作用。

【问题讨论】：

当然当然会有反对票，毕竟这是。

标签： css sass

【解决方案1】：

在我写这个问题的时候，我有一个看起来很疯狂的想法，但它奏效了！所以，这是我有史以来的第一个问答：

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

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

我使用的插件将.js-tabby 类附加到html 元素，所以我瞄准了它，然后砰！它有效。

这是困扰我很久的事情，我希望我能避免其他人进一步沮丧。

【讨论】：