Sass: select parent with multiple selectors nested

Here is what I end up trying to do:

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

I have several nested selectors, and instead of .books article new .books article selector, I would like them to be nested, but still only target article elements in .books .

I tried this and it works, but the output is a .books.books article , which is redundant and makes me cringe.

 .books, .dvds, .magazines { &.books article { /* Outputs ".books.books article, .dvds.books article, .magazines.books article"...boooo, hisssss */ } } 
+4
source share
1 answer

How about something more:

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

compiles:

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

Source: https://habr.com/ru/post/1437172/


All Articles