Sass:选择具有多个嵌套选择器的父元素

时间:2012-10-01 11:53:48

标签: css css-selectors sass

以下是我最终要做的事情:

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

1 个答案:

答案 0 :(得分:17)

更像是什么:

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