Breakpoint Function

As of Breakpoint 2.3.0, Breakpoint includes a like-named function, breakpoint(), that takes two arguments, $query and the optional argument $contexts... that allow for parsing of a breakpoint variable without going through the Breakpoint mixin. Passing in only $query will return a map with the following keys:

/* Sass */
$dynamic-context: 400px ('min-height' 200px), (300px 325px) (orientation portriat) monochrome;
$no-query: 700px, 'no-query' '.no-mq';
.query {
  /* Or Query */
  $bkpt: breakpoint($dynamic-context);
  _query: inspect(map-get($bkpt, 'query'));
  _fallback: inspect(map-get($bkpt, 'fallback'));
  _context-holder: inspect(map-get($bkpt, 'context holder'));
  _query-count: inspect(map-get($bkpt, 'query count'));
  /* No Query */
  $bkpt: breakpoint($no-query);
  _query: inspect(map-get($bkpt, 'query'));
  _fallback: inspect(map-get($bkpt, 'fallback'));
  _context-holder: inspect(map-get($bkpt, 'context holder'));
  _query-count: inspect(map-get($bkpt, 'query count'));
}

/* CSS */
.query {
  /* Or Query */
  _test: 'breakpoint(400px "min-height" 200px, 300px 325px orientation portriat monochrome)';
  _query: " (min-width: 400px) and (min-height: 200px),  (min-width: 300px) and (max-width: 325px) and (orientation: portriat) and (monochrome)";
  _fallback: false;
  _context-holder: (min-width: 400px 300px, "min-height": 200px false, max-width: false 325px, orientation: false portriat, "monochrome": false monochrome);
  _query-count: 2;
  /* No Query */
  _test: 'breakpoint(700px, "no-query" ".no-mq")';
  _query: " (min-width: 700px)";
  _fallback: ".no-mq";
  _context-holder: (min-width: 700px);
  _query-count: 1;
}

When passing in $contexts... as well, a new key will be added in the return map called context with each context passed in will querying the Breakpoint context for that feature and creating a map key under context for that feature. Media and no-query can also be queried this way. Each value will be identical to what would be returned from breakpoint-get-context.

/* Sass */
$dynamic-context: 400px ('min-height' 200px), (300px 325px) (orientation portriat) monochrome;
$no-query: 700px, 'no-query' '.no-mq';
.context {
  /* Or Query */
  $bkpt: breakpoint($dynamic-context, 'min-width', 'min-height', 'orientation', 'no-query');
  $contexts: map-get($bkpt, 'context');
  @each $k, $v in $contexts {
    _#{$k}: inspect($v);
  }
  /* No Query */
  $bkpt: breakpoint($no-query, 'min-width', 'max-width', 'media');
  $contexts: map-get($bkpt, 'context');
  @each $k, $v in $contexts {
    _#{$k}: inspect($v);
  }
}

/* CSS */
.context {
  /* Or Query */
  _test: 'breakpoint(400px "min-height" 200px, 300px 325px orientation portriat monochrome)';
  _min-width: 400px 300px;
  _min-height: 200px false;
  _orientation: false portriat;
  _no-query: false;
  /* No Query */
  _test: 'breakpoint(700px, "no-query" ".no-mq")';
  _min-width: 700px;
  _media: all;
  _no-query: ".no-mq";
}

Test -> Control