Multiple two-class selectors in Sass

CssSass

Css Problem Overview

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

Css Solutions

Solution 1 - Css

try this:

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

Solution 2 - Css

In this case we can use @each directive:

$pages: shop, contact, about, faq;

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

sassmeister.com

Solution 3 - Css

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

Solution 4 - Css

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

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

Solution 5 - Css

Parent child relationship in sass

parent_tag {
    .child {
       // rules here
    }
}
Categories
Recommended Css Solutions
Recommended Sass Solutions

Previous Solution:

how to know status of currently running jobs

Sql ServerSql Server-2008TsqlSql Agent

Next Solution:

Can't use SURF, SIFT in OpenCV

PythonOpencvSiftSurf

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFellow StrangerView Question on Stackoverflow
Solution 1 - CssAlessandro MinoccheriView Answer on Stackoverflow
Solution 2 - CssDmitryView Answer on Stackoverflow
Solution 3 - CssJoseph SilberView Answer on Stackoverflow
Solution 4 - CssAlecView Answer on Stackoverflow
Solution 5 - CssNaveen VigneshView Answer on Stackoverflow