萨斯父母选择器

Question

我不确定最好的措辞方式，而是通过示例。

我想要的输出是：

.parent-class2.parent .child {
  color: red;
}

这是我正在使用的语法。

.parent {
  .child {
    .parent-class2.& {
      color: red;
    }
  }
}

Answer 1

您的语法差不多了。有两件事要注意：

1）SASS不喜欢选择器（格式错误的选择器）中的冗余时段.：

• 对于.parent-class2.&，.&之前的时期是多余的，因为& = .parent .child
• 请注意，在.&之前加上多余的句点将错误地编译为 ..parent .child

2）要在选择器的中间使用与号而没有任何空格，则必须使用字符串插值&→#{&}来包装它，以便SASS对其进行评估。

这是固定版本：

.parent {
  .child {
    .parent-class2#{&} {
      color: red;
    }
  }
}

Answer 2

您可以使用&#{&}选择器（“ &”是父项，因此我们选择“父项的父项”）。

如https://css-tricks.com/the-sass-ampersand/#article-header-id-11

中所述

  

需要插入括号＃{}，因为两个接触式＆字符是无效的Sass。

您还可以查看@at-root选择器，它可能对您有用。