Sass 中的多个二类选择器

Posted 2023-03-06

技术标签:

【中文标题】Sass 中的多个二类选择器【英文标题】：Multiple two-class selectors in Sass 【发布时间】：2013-09-04 20:58:18 【问题描述】：

对于单个声明块有多个二类选择器，是否可以简化以下内容（即不必重复body 标签）：

body.shop, body.contact, body.about, body.faq background-color:#fff;

【问题讨论】：

【参考方案1】：

试试这个：

body
   &.shop, &.contact, &.about, &.faq 
        background-color:#fff;

【讨论】：

【参考方案2】：

body 
    &.shop, &.contact 
        // Styles here...

【讨论】：

【参考方案3】：

在这种情况下，我们可以使用@each 指令：

$pages: shop, contact, about, faq;

body 
  @each $page in $pages 
    &.#$page 
      background-color:#FFF;

sassmeister.com

【讨论】：

【参考方案4】：

如果你使用的是节点编译的 sass，可能会这样。

    body 
      .shop, .contact, .about, .faq 
          background-color:#FFFFFF;

【讨论】：

【参考方案5】：

sass 中的父子关系

parent_tag 
    .child 
       // rules here

【讨论】：

以上是关于Sass 中的多个二类选择器的主要内容，如果未能解决你的问题，请参考以下文章