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

Question

如 Stack Overflow 中所述 in another question和 MDN tells about the specificity选择器，我想通过 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;
    }
  } 
}