SASS嵌套导入的样式以创建复合选择器 我在找什么

我有一个scss文件，我正在我的网站上使用它

// common.scss
.red {
    background: red;
}

.green {
    background: green ;
}

在另一个scss文件中，我想将这些常见样式添加到一个元素中，该元素将具有一个类：

.filter

，并且位于包装类：

.wrapper

内。我希望这是这个新文件的css：

// css
.wrapper > .filter.red {
  background: red;
}
.wrapper > .filter.green {
  background: green;
}

另外，请注意，我无法更改common.scs，因为它用于其他样式表中

---

我试过的 尝试#1 对于我的scss文件，我执行了以下操作：

// new_element.scss
.wrapper > {
    .filter {
      @import "./common.scss";
    }
}

但这会产生：

// css
.wrapper > .filter .red {
  background: red;
}
.wrapper > .filter .green {
  background: green;
}

// css
.filter .wrapper > .red {
  background: red;
}
.filter .wrapper > .green {
  background: green;
}

注意

.filter.red

和

.filter.red

之间的区别

尝试#2 我还尝试：

// new_element.scss
.wrapper > {
    .filter & {
      @import "./common.scss";
    }
}

但这会产生：

// css
.wrapper > .filter .red {
  background: red;
}
.wrapper > .filter .green {
  background: green;
}

// css
.filter .wrapper > .red {
  background: red;
}
.filter .wrapper > .green {
  background: green;
}

尝试#3 这是：

// new_element.scss
.wrapper {
    > .filter & {
      @import "./common.scss";
    }
}

产生：

// css
.wrapper > .filter .red {
  background: red;
}
.wrapper > .filter .green {
  background: green;
}

// css
.filter .wrapper > .red {
  background: red;
}
.filter .wrapper > .green {
  background: green;
}

// css
> .filter .wrapper .red {
  background: red;
}
> .filter .wrapper .green {
  background: green;
}

---

问题

---

有没有办法得到我想要的输出，或者有没有办法使复合类选择器与外部文件中的其他选择器相结合。

有点不清楚，但我会尝试

&.foo

或

&.bar

：

// new_element.scss
&.foo {
  @import './common.scss';
}

或

以前，您尝试过

.foo&{

，这非常接近，但它会生成

.foo.bar{

，而不是

.foo.bar{

，这正是我认为您想要的

---

如果删除

.foo

和

&

之间的空格，它将返回

.foo.bar

有点不清楚，但我会尝试

&.foo

或

&.bar

：

// new_element.scss
&.foo {
  @import './common.scss';
}

或

以前，您尝试过

.foo&{

，这非常接近，但它会生成

.foo.bar{

，而不是

.foo.bar{

，这正是我认为您想要的

---

如果你删除

.foo

和

&

之间的空格，它将返回

.foo.bar

我更新了我的帖子，现在有点复杂了…但希望也能更清楚一点。你的第一个建议：

&.foo

不起作用。你的第二个建议会起作用…但是它需要修改common.scss…w我不能这样做，因为它正在被其他样式表导入和使用。更改它会导致其他实例中断。我更新了我的帖子，现在有点复杂…但希望也能更清楚一点。你的第一个建议：

&.foo

不起作用。你的第二个建议会起作用…但是需要更改ing common.scss…我不能这样做，因为它正在被其他样式表导入和使用。更改它会导致其他实例中断。