How to combine a SASS list into multiple selectors

Question

I have several page classes on my page:

.page1, page2, .page3

and so on.

I would like to have selectors for permutations of them:

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

How would I do that in SASS?

I tried doing:

$pages: (page1, page2, page3);

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

Which produces:

.page1-foo {
    // some css
}

.page2-foo {
    // some css
}

.page3-foo {
    // some css
}

But I can't find a solution combining the classes to a single selector...

possible duplicate of http://stackoverflow.com/questions/16593917/sass-for-loop-output-css-as-one-block-of-code — cimmanon, Aug 25 '14 at 14:19

score 3 · Accepted Answer · answered Aug 25 '14 at 18:30

3

Checkout my variant:

$pages: (page1, page2, page3);

%styles{
  color: #fff;
}

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

answered Aug 25 '14 at 18:30

Slawa Eremin

It is preferred that duplicates be closed as duplicates, rather than be answered. – cimmanon Aug 25 '14 at 18:49

1 Answers1