Sass 中的多个二类选择器

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

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

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

【问题讨论】：

标签： css sass

【解决方案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;
    }
  }
}

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

sass 中的父子关系

parent_tag {
    .child {
       // rules here
    }
}

【讨论】：