css - Sass 中的多个二类选择器

Question

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

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

score 109 · Accepted Answer

109

尝试这个：

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

于 2013-09-01T18:33:30.967 回答

score 27 · Accepted Answer

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

$pages: shop, contact, about, faq;

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

score 6 · Accepted Answer

6

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

于 2013-09-01T18:33:42.233 回答

score 0 · Accepted Answer

如果您使用的是由节点编译的 sass，则可以。

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

score -1 · Accepted Answer

-1

sass中的父子关系

parent_tag {
    .child {
       // rules here
    }
}

于 2021-09-29T10:20:58.363 回答

5 回答 5