76

Having multiple two-class selectors for a single declaration block, is it possible to simplify the following (i.e. not having to repeat the body tag):

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

5 Answers 5

126

try this:

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

In this case we can use @each directive:

$pages: shop, contact, about, faq;

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

sassmeister.com

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

If you are using sass compiled by the node, that may do.

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

Parent child relationship in sass

parent_tag {
    .child {
       // rules here
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.