Sass:使用多个嵌套选择器选择父元素
Posted
技术标签:
【中文标题】Sass:使用多个嵌套选择器选择父元素【英文标题】:Sass: Selecting the parent element with multiple nested selectors 【发布时间】:2012-09-22 06:30:38 【问题描述】:这是我最终想要做的事情:
.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
选择器,而是希望它们保持嵌套,但仍然只针对 .books
下的 article
元素。
我确实尝试过,它有效,但输出是.books.books article
,这是多余的,让我畏缩:
.books, .dvds, .magazines
&.books article
/* Outputs ".books.books article, .dvds.books article, .magazines.books article"...boooo, hisssss */
【问题讨论】:
你能说说你为什么使用 &.books 使用 SASS,使用&
在嵌套时选择父选择器。
我从来不理解嵌套语法。是否输出.books.books article
而不是.books.books article, .dvds.books article, .magazines.books article
?
@BoltClock Bah,你是对的。所以,更糟糕的是。 :)
据我所知,您想要实现的目标是不可能的。此外,我建议将其分解为两个嵌套的代码,而不是试图将它们全部合二为一,这样会更容易阅读和维护(并且占用同样多的代码行)。
【参考方案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 */
【讨论】:
这是因为amazing ampersand in sass! 它值得被推荐,让更多人看到它以上是关于Sass:使用多个嵌套选择器选择父元素的主要内容,如果未能解决你的问题,请参考以下文章