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

如此处有关选择器的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对此没有任何说明。关于如何实现这一目标的任何想法？

编辑

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

最佳答案

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

关于css - 通过Sass使用双选择器增加特异性权重，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47781073/