如何将SASS列表组合成多个选择器

Question

我的页面上有几个页面类：

.page1, page2, .page3

等等。

我想有选择器来排列它们：

.page1-foo, page2-foo, .page3-foo
.page1-bar, page2-bar, .page3-bar

我如何在SASS中做到这一点？

我尝试过：

$pages: (page1, page2, page3);

@each $page in $pages {
  .#{$page}-foo {
     // some css
  }
}

产生：

.page1-foo {
    // some css
}

.page2-foo {
    // some css
}

.page3-foo {
    // some css
}

但我找不到将这些类组合成单个选择器的解决方案......

Answer 1

结帐我的变体：

$pages: (page1, page2, page3);

%styles{
  color: #fff;
}

@each $page in $pages {
  .#{$page}-foo {
     @extend %styles;
  }
}