-
Notifications
You must be signed in to change notification settings - Fork 142
Breakpoint Function
Snugug edited this page Dec 4, 2013
·
3 revisions
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";
}