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

【问题标题】：How to combine a SASS list into multiple selectors如何将 SASS 列表组合成多个选择器
【发布时间】：2014-08-25 14:08:40
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

查看我的变体：

$pages: (page1, page2, page3);

%styles{
  color: #fff;
}

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

【讨论】：