SASS嵌套导入的样式以创建复合选择器

Question

我在寻找什么

我有一个在网站上使用的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.scss，因为它已在其他样式表中使用。

---

我尝试过的

尝试＃1

对于我的scss文件，我这样做：

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

但是会产生：

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

请注意.filter .red和.filter.red

尝试＃2

我也尝试过：

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

但是会产生：

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

尝试＃3

这：

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

产生：

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

---

问题

有什么办法可以得到我想要的输出，又有一种方法可以使复合类选择器将.filter与外部文件中的其他选择器组合在一起。

Answer 1

目前还不清楚，但是我可以尝试&.foo或&.bar：

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

或

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

之前，您尝试过.foo & {，它确实很接近，但是它会产生.foo .bar {而不是.foo.bar {，这正是我想的。

如果删除.foo和&之间的空格，它将返回.foo.bar