General

mixins

mq

@mixin mq($conditions) { ... }

Description

Guard mixin to enable usage of include-media with null values and protect against wrong usage.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$conditions`	Media query conditions	`...string`	— none

Example

Above breakpoint md:

@include media('>md') { color: red; }

Below or equal breakpoint lg:

@include media('<=lg') { color: red; }

Requires

[mixin] mq--check-condition-validity

Used by

[mixin] mq--write
[mixin] mq--write

[private] mq--bridge

@mixin mq--bridge($root-class) { ... }

Description

Add a hidden but readable hook to be used in html and js

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$root-class`	Class that serves as root name for the elements containing the mq data	`String`	— none

Used by

[mixin] mq--spy

mq--spy

@mixin mq--spy($root-class) { ... }

Description

Append mq bridge to dom object

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$root-class`	Class that serves as root name for the elements containing the mq data	`String`	— none

Requires

[mixin] mq--bridge
[mixin] mq--write

[private] mq--write

@mixin mq--write($root-class) { ... }

Description

Writes the viewport information into a content attribute, contained by the media expression it describes

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$root-class`	Class that serves as root name for the elements containing the mq data	`String`	— none

Requires

[mixin] mq
[mixin] mq
[function] mq--conditions
[function] mq--expressions
[variable] media-type-expressions
[variable] media-feature-expressions
[variable] media-type-expressions
[variable] media-feature-expressions

Used by

[mixin] mq--spy

[private] mq--check-condition-validity

@mixin mq--check-condition-validity($conditions) { ... }

Description

Check a list of conditions for it's validity based on the used operator as only <= and > make sense

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$conditions`	List of conditions, possibly nested	`List`	— none

Throws

Operator #{$operator} is not allowed in condition #{$condition}

Requires

[variable] media-expressions

Used by

[mixin] mq

functions

[private] mq--conditions

@function mq--conditions($expressions) { ... }

Description

Convert a map of media expressions into a list of all possible viewport combinations

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$expressions`	Map of media feature expressions, grouped by type	`Map`	— none

Returns

Map —

Conjugated map of all possible media feature expressions

Used by

[mixin] mq--write

[private] mq--expressions

@function mq--expressions($expressions) { ... }

Description

Convert a list of media expressions into a list of sass maps with name and query properties

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$expressions`	A flat list of media feature expressions	`Map`	— none

Returns

List —

A list of maps containing all available separate media queries used in the project

Used by

[mixin] mq--write

variables

screen-xs-min

$screen-xs-min: 0 !default;

Description

Computed breakpoints system, borrowed from bootstrap

breakpoints

$breakpoints: (
    xs: $screen-xs-max,
    sm: $screen-sm-max,
    md: $screen-md-max,
    lg: $screen-lg-max,
    xl: $screen-xl-max,
) !default;

Description

Break point definitions used by include-media

media-type-expressions

$media-type-expressions: (
    screen: 'screen',
    print: 'print',
) !default;

Description

Media type expressions

Used by

[mixin] mq--write
[mixin] mq--write

media-feature-expressions

$media-feature-expressions: (
    width: (
        xs: '(max-width: #{$screen-xs-max})',
        sm: ('(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})'),
        md: ('(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})'),
        lg: ('(min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max})'),
        xl: ('(min-width: #{$screen-xl-min}) and (max-width: #{$screen-xl-max})'),
        xxl: '(min-width: #{$screen-xxl-min})',
    ),
    orientation: (
        portrait: '(orientation: portrait)',
        landscape: '(orientation: landscape)',
    ),
    resolution: (
        res2x: ('(min-resolution: 2dppx)'),
        res3x: ('(min-resolution: 3dppx)'),
    ),
) !default;

Description

Media feature expressions

Used by

[mixin] mq--write
[mixin] mq--write

media-expressions

$media-expressions: map-assign(
    $media-type-expressions,
    map-get($media-feature-expressions, width),
    map-get($media-feature-expressions, orientation),
    map-get($media-feature-expressions, resolution)
) !default;

Description

Media expressions, used by include-media

Example

Combine width expression xs with resolution expression res2x:

@include media('xs', 'res2x') { color: red; }

Used by

[mixin] mq--check-condition-validity