Breakpoint Context

Ever wanted to get the context of a media query from within a mixin or function? Well we have, so we’ve made that possible! Simply call the breakpoint-get-context($feature) function which will either return the contextual value for that feature ('min-width', 'max-width', etc…) or false. You can then do all the awesomeness that you’ve ever wanted to do with that information.

Available Context

The most basic way to query your context is to see if you are inside a media query at all. Simply call the function breakpoint-has-context() and it will return true if you are inside of a context and false if you are now.

Single Context Query

Querying when you've got a single context is easy. It simply returns the value if you're in a context, or false if you're not.

$basic: 700px (height 600px 800px) (orientation landscape);

#foo {
  @include breakpoint($basic) {
    content: 'min-height:' breakpoint-get-context('min-height');
    content: 'orientation:' breakpoint-get-context('orientation');
    content: 'max-width: ' breakpoint-get-context('max-width');
  }
}

@media (min-width: 700px) and (min-height: 600px) and (max-height: 800px) and (orientation: landscape) {
  #foo {
    content: "min-height:" 600px;
    content: "orientation:" landscape;
    content: "max-width: " false;
  }
}

Multiple Contexts Query

If you are querying a media query that has Or Queries, you may have multiple contexts. In this case, Breakpoint will return a list for all of your context queries. All queries that have at least one valid context will have the same length, with false added in place where a context does not exist for that media query.

$advanced: 700px, 900px (orientation landscape), (orientation portrait);

#foo {
  @include breakpoint($advanced) {
    $min-width: breakpoint-get-context('min-width');
    $orientation: breakpoint-get-context('orientation');

    @for $i from 1 through length($orientation) {
      content: 'min-width:' nth($min-width, $i);
      content: 'orientation:' nth($orientation, $i);
    }
  }
}

@media (min-width: 700px), (min-width: 900px) and (orientation: landscape), (orientation: portrait) {
  #foo {
    content: "min-width:" 700px;
    content: "orientation:" false;
    content: "min-width:" 900px;
    content: "orientation:" landscape;
    content: "min-width:" false;
    content: "orientation:" portrait;
  }
}