CODEWITHSUNDEEP
htmlcsssasslessscss-mixins
Danish Adeel
Danish Adeel

Reputation: 730

How to combine same media queries inside single query in SASS

I used to combine my media queries at one place in LESS like this

LESS:

.media-mixin(@break) when (@break = 1200px) {
  .abc{
       color: red;
  }
}
.media-mixin(@break) when (@break = 1200px) {
  .xyz{
       color: yellow;
  }
}

@media all and (max-width: 1200px) {
  .media-mixin(1200px);
}

CSS result

@media all and (max-width: 1200px) {
  .abc{
     color: red;
  }
  .xyz{
       color: yellow;
  }
}

How to convert the above mixin or What is the best way to do the same in SASS, I am unable to find a simple way so far.

Upvotes: 0

Views: 217

Answers (1)

Dan Knights
Dan Knights

Reputation: 8378

Not sure there is a simple way to do the same in Sass.

You could think of it in reverse and use a mixin with the media query inside:

@mixin media-mixin($selector, $rule, $value) {
    @media all and (max-width: 1200px) {
        #{$selector} {
            #{$rule}: $value;
        }
    }
}

@include media-mixin(p, color, red);

Could also extend it to take a list of properties and values:

@mixin media-mixin($selector, $rules...) {
    @media all and (max-width: 1200px) {
        #{$selector} {
            @each $rule in $rules {
                #{nth($rule, 1)}: nth($rule, 2);
            }
        }
    }
}

@include media-mixin(p, (color, red), (background-color, blue));

/* More complex selectors need quotes */
@include media-mixin(".container > p", (color, red), (background-color, blue));

Upvotes: 1

Related Questions