通过 Sass 使用双选择器增加特异性权重

Question

正如 Stack Overflow in another question 和 MDN tells about the specificity of selectors 中提到的，我想通过 Sass 稍微增加我的选择器的权重以覆盖一些现有的样式。这是（编译的）CSS 的示例。

.parent .parent__child.parent__child { color: red; }

它比仅仅使用.parent .parent__child 作为选择器更具体。

---

我有办法通过 Sass 做到这一点，但我认为应该有更好的方法来做到这一点。我现在这样做的方式是：

.parent {
    &__child.parent__child { color: red; }
}

理想情况下，这将是最好的设置（与号必须直接相互连接，因为它不是子选择器）：

.parent {
    &__child&__child { color: red; }
}

这会引发错误，并在“子”选择器之间添加一个点。 Sass documentation 没有说明这个特殊情况。关于如何实现这一点的任何想法？

编辑

我知道插值括号法，但是如果选择器在三层中更深，例如四层中的三层，该怎么办？我只希望复制它的父选择器，而不是 整个 选择器树。

Answer 1

在 SASS 中有一个特殊的技巧，可以使用插值括号（更多关于 here 和 here）将特异性加倍，因为两个相邻的 & 是无效的 SASS 语法。

.parent {
  &__child {
    &#{&} {
      color: red; 
    }
  } 
}

// compiles to
// .parent__child.parent__child { color: red; }

// You can also do this with deeper nested elements by
// prefacing the interpolation with the ancestor selectors:
.parent {
  &__child {
    .some .ancestor .elements &#{&} {
      color: red;
    }
  }
}

// compiles to
// .some .ancestor .elements .parent__child.parent__child { color: red; }

对于那些偶然发现并使用 LESS 的人，允许使用双 &&：

.parent {
  &__child {
    && {
      color: red;
    }
  } 
}