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:使用多个嵌套选择器选择父元素的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery 和 CSS 选择器选择嵌套元素的共同父/祖先

sass2:

sass的嵌套

sass学习入门篇

用css选择器 如何选择自己的父元素

如何在 SASS 中使用嵌套元素构造 BEM 修改器