Media queries via (s)CSS

Feature Request

What is the desired behavior?

Use media query via mixin in CSS

What is the use-case or motivation for the desired behavior?

From what i’ve read in the DOC if i want a style eg a button with different background color based on breakpoints i can only do something like

<button [ngClass.xs]="xs-button" [ngClass.xs]="md-button">HI!</button>

and in CSS

.xs-button {
  background-color: red;
}
.md-button {
  background-color: red;
}

This surely works but leads a lot of pollution in the markup, could you also export a mixins to do the below?

With CSS media query:

<button>HI!</button>

button {
  background-color: yellow;
  @include media-breakpoint(xs) {
     background-color: red;
   }
  @include media-breakpoint(md) {
    background-color: blue;
   }
}

I can of course crate a set of mixins to do the above but would be great if this would exposed by flex-layout matching configured breakpoints…

Thanks

[CaerusKaru]

This feature will be included in today’s beta 22 release. To use, simply do the following in your SASS files:

@import '~@angular/flex-layout/mq';

// This works for all Flex Layout breakpoints
@include layout-bp(xs) {
	background-color: red;
}

[CaerusKaru]

@fabiocarneiro see https://github.com/angular/flex-layout/pull/987