Where is the SCSS media query sizes?

Missing? 320
600
960
Missing! 1280
Missing! 1920

I found only:

// Media queries
// TODO: Find a way to respect media query ranges.
// TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.
$mat-xsmall: 'max-width: 600px';
$mat-small: 'max-width: 960px';

[jelbourn]

See https://github.com/angular/flex-layout

No, I am not asking about media query. I am asking about SCSS.

I am creating a new theme, and I need to know the Material media sizes.

[jelbourn]

We don't have those media breakpoints as part of our API at this time.

is it going to be in SCSS? for theming i need it. i created my own, but would be good as a material variable.

thanks.

[patrickmichalina]

For anyone needing a quick snippet:

$mat-xs: screen and (max-width: 599px);
$mat-sm: screen and (min-width: 600px) and (max-width: 959px);
$mat-md: screen and (min-width: 960px) and (max-width: 1279px);
$mat-lg: screen and (min-width: 1280px) and (max-width: 1919px);
$mat-xl: screen and (min-width: 1920px) and (max-width: 5000px);
$mat-lt-sm: screen and (max-width: 599px);
$mat-lt-md: screen and (max-width: 959px);
$mat-lt-lg: screen and (max-width: 1279px);
$mat-lt-xl: screen and (max-width: 1919px);
$mat-gt-xs: screen and (min-width: 600px); 
$mat-gt-sm: screen and (min-width: 960px);
$mat-gt-md: screen and (min-width: 1280px);
$mat-gt-xl: screen and (min-width: 1920px);

[LayZeeDK]

For anyone needing a quick snippet:
(...)
-- @patrickmichalina

Exactly, these match the media queries defined by Angular Flex Layout.

[FirstVertex]

Here's how to make use of @patrickmichalina 's SCSS variables:

@media #{$mat-gt-xs} {
  // insert your styles
}

[Bielik20]

Should anyone have a problem with SCSS not compiling put queries inside string:

$mat-xs: "screen and (max-width: 599px)";
$mat-sm: "screen and (min-width: 600px) and (max-width: 959px)";
$mat-md: "screen and (min-width: 960px) and (max-width: 1279px)";
$mat-lg: "screen and (min-width: 1280px) and (max-width: 1919px)";
$mat-xl: "screen and (min-width: 1920px) and (max-width: 5000px)";
$mat-lt-sm: "screen and (max-width: 599px)";
$mat-lt-md: "screen and (max-width: 959px)";
$mat-lt-lg: "screen and (max-width: 1279px)";
$mat-lt-xl: "screen and (max-width: 1919px)";
$mat-gt-xs: "screen and (min-width: 600px)";
$mat-gt-sm: "screen and (min-width: 960px)";
$mat-gt-md: "screen and (min-width: 1280px)";
$mat-gt-xl: "screen and (min-width: 1920px)";

[daddyschmack]

Late to the party on this, , I would suggest that pointing to an entire repo when someone asks about breakpoints is not very helpful. Besides the fact that I don't use, and don't want to use flex-layout as I am a good enough developer that I can write my own css in flexbox and grid and i don't need someone's idea of "easier" syntax and injected styles to ruin my best practices of separation of concerns.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}