CODEWITHSUNDEEP
csssass
Fellow Stranger
Fellow Stranger

Reputation: 34103

Multiple two-class selectors in Sass

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;}

Upvotes: 79

Views: 100161

Answers (6)

Roman
Roman

Reputation: 21873

I am not sure that this directly addresses the question, but with scss you can reuse two classes in one like this:

.displayFlex {
  display: '-webkit-box';      /* OLD - iOS 6-, Safari 3.1-6 */
  display: '-moz-box';         /* OLD - Firefox 19- (buggy but mostly works) */
  display: '-ms-flexbox';      /* TWEENER - IE 10 */
  display: '-webkit-flex';     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

.flexOne {
  flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1; /* OLD - Firefox 19- */
  -webkit-flex: 1; /* Chrome */
  -ms-flex: 1; /* IE 10 */
}

.boxWrapper01 {
  @extend .displayFlex;
  @extend .flexOne;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: beige;
}

Upvotes: 0

Naveen Vignesh
Naveen Vignesh

Reputation: 1357

Parent child relationship in sass

parent_tag {
    .child {
       // rules here
    }
}

Upvotes: -1

Alec
Alec

Reputation: 19

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

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

Upvotes: 1

Dmitry
Dmitry

Reputation: 554

In this case we can use @each directive:

$pages: shop, contact, about, faq;

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

sassmeister.com

Upvotes: 30

Joseph Silber
Joseph Silber

Reputation: 220136

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

Upvotes: 8

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

try this:

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

Upvotes: 129

Related Questions