css - Sass: 複数のネストされたセレクターで親要素を選択する

Question

これが私が最終的にやろうとしていることです：

.books, .dvds, .magazines {
  article &.books {
    /* Wanting the selector to only be ".books article" */
  }
  article {
    /* Can apply to any of the `article` tags under .books, .dvds and .magazines */
  }
}

ネストされたセレクターがいくつかあり、新しい.books articleセレクターを分割する代わりに、それらをネストしたままにしたいのですが、それでもarticle下の要素のみをターゲットにし.booksます。

私はこれを試してみましたが、うまくいきましたが、出力.books.books articleは冗長で、私をうんざりさせます:

.books, .dvds, .magazines {
    &.books article {
        /* Outputs ".books.books article, .dvds.books article, .magazines.books article"...boooo, hisssss */
    }
}

Answer 1

次のようなものはどうですか：

article {

  .books &,
  .dvds &,
  .magazines & {
    /* book, dvd, magazine shared stuff */
  }

  .books & {
    /* book stuff */
  }

}

コンパイルすると:

.books article, .dvds article, .magazines article {
  /* book, dvd, magazine shared stuff */
}
.books article {
  /* book stuff */
}