Combine raw selector with mixin into single query

Question

I have the following SASS rules:

  p {
    margin: 0;
  }
  @include desktop() {
    p {
      margin: 0;
    }
  }

The mixin is like this:

@mixin desktop() {
  @media screen and (min-width: 1200px) {
    @content;
  }
}

Elsewhere in the codebase there's a margin being set on desktop, hence in this case I need to explicitly remove it on the desktop breakpoint too, just having the first p selector rule doesn't cut it.

Is there a neat way to combine the selectors as it feels verbose having the same margin: 0 rule twice? I realise there's probably something more fundamentally wrong here with the inheritance, but that's outside the scope of the question. I don't want to use !important.

Many thanks.

score 0 · Accepted Answer · answered Jul 21 '21 at 06:30

Is there a neat way to combine the selectors? Sure there is… Just use another mixin:

@mixin para {
    p {
        margin: 0;
    }
}

@include para;

@include desktop {
    @include para;
}

You clearly already know how to use mixins, so I'm assuming your question is really about whether you can nest one mixin within another (yes), or whether you can include selectors within a mixin (yes).

Combine raw selector with mixin into single query

1 Answers1