萨斯:选择具有多个嵌套选择的父元素(Sass: Selecting the parent eleme

2019-08-01 01:29发布

这里就是我最终想要做:

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

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


文章来源: Sass: Selecting the parent element with multiple nested selectors