Sass：选择具有多个嵌套选择器的父元素 [英] Sass: Selecting the parent element with multiple nested selectors

问题描述

这是我最终要做的：

.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文章选择器，我想保持它们嵌套，但仍然只有目标 。

I've got some nested selectors and instead of breaking out a new .books article selector, I'd like to keep them nested, but still only target article elements under .books.

我试过这个，它的工作原理，但输出是 .books.books文章，这是多余的，让我cringe：

I did try this, and it works, but the output is .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 */
    }
}

推荐答案

更像是什么：

article {

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

  .books & {
    /* book stuff */
  }

}

$ b b

编译为：

compiles to:

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

这篇关于Sass：选择具有多个嵌套选择器的父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！