- Source:
Methods
build-breakpoint-query($breakpoint-definitionopt) → {String}
Constructs a query to be used in a media query, based on a breakpoint definition. Also automatically converts values to rem.
Directions in composite definitions may be "up", "down" or "only".
You may also define the special breakpoints "landscape" or "portrait" to cover device orientations.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
$breakpoint-definition |
Number | Literal | List.<String> |
<optional> |
0 | either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints |
- Source:
Throws:
-
error if named breakpoint is unknown
-
error if an unnamed breakpoint has an "only" direction
Returns:
the media query string for the breakpoint definition
- Type
- String
Example
build-breakpoint-query(200rem)
=> '(min-width: 200rem)'
build-breakpoint-query(small down)
=> '(max-width: 199rem)'
build-breakpoint-query(('large' 'only'))
=> '(min-width: 200rem) and (max-width: 499rem)'
build-breakpoint-query(1024px only)
=> '(min-width: 64rem) and (max-width: 64rem)'
build-breakpoint-query(landscape)
=> '(orientation: landscape)'