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

通过Sass

1 个答案: