Sass中有多个两级选择器

Question

为单个声明块提供多个两类选择器，是否可以简化以下操作（即不必重复body标记）：

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

Answer 1

试试这个：

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

Answer 2

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

$pages: shop, contact, about, faq;

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

sassmeister.com

Answer 3

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

Answer 4

如果您正在使用由节点编译的sass，则可能会这样做。

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