General

variables

Description

Creates a list of global breakpoints

Example

Creates a single breakpoint with the label phone

$breakpoints: ('phone': 320px);

Used by

[function] im-intercepts-static-breakpoint
[mixin] media-context

Author

Eduardo Boucas

Description

Creates a list of static expressions or media types

Example

Creates a single media type (screen)

$media-expressions: ('screen': 'screen');

Creates a static expression with logical disjunction (OR operator)

$media-expressions: (
  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
);

Used by

[function] im-intercepts-static-breakpoint
[mixin] media-context

Author

Eduardo Boucas

Description

Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals

Example

Interval for pixels is defined as 1 by default

@include media('>128px') {}

/* Generates: */
@media (min-width: 129px) {}

Interval for ems is defined as 0.01 by default

@include media('>20em') {}

/* Generates: */
@media (min-width: 20.01em) {}

Interval for rems is defined as 0.1 by default, to be used with font-size: 62.5%;

@include media('>2.0rem') {}

/* Generates: */
@media (min-width: 2.1rem) {}

Author

Eduardo Boucas

Description

Defines whether support for media queries is available, useful for creating separate stylesheets for browsers that don't support media queries.

Example

Disables support for media queries

$im-media-support: false;
@include media('>=tablet') {
  .foo {
    color: tomato;
  }
}

/* Generates: */
.foo {
  color: tomato;
}

Used by

[mixin] media

Author

Eduardo Boucas

Description

Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or intercept the breakpoint will be displayed, any others will be ignored.

Example

This media query will show because it intercepts the static breakpoint

$im-media-support: false;
$im-no-media-breakpoint: 'desktop';
@include media('>=tablet') {
  .foo {
    color: tomato;
  }
}

/* Generates: */
.foo {
  color: tomato;
}

This media query will NOT show because it does not intercept the desktop breakpoint

$im-media-support: false;
$im-no-media-breakpoint: 'tablet';
@include media('>=desktop') {
  .foo {
    color: tomato;
  }
}

/* No output */

Used by

[function] im-intercepts-static-breakpoint

Author

Eduardo Boucas

Description

Selects which media expressions are allowed in an expression for it to be used when media queries are not supported.

Example

This media query will show because it intercepts the static breakpoint and contains only accepted media expressions

$im-media-support: false;
$im-no-media-breakpoint: 'desktop';
$im-no-media-expressions: ('screen');
@include media('>=tablet', 'screen') {
  .foo {
    color: tomato;
  }
}

 /* Generates: */
 .foo {
   color: tomato;
 }

This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted

$im-media-support: false;
$im-no-media-breakpoint: 'desktop';
$im-no-media-expressions: ('screen');
@include media('>=tablet', 'retina2x') {
  .foo {
    color: tomato;
  }
}

/* No output */

Used by

[function] im-intercepts-static-breakpoint

Author

Eduardo Boucas

mixins

Description

Generates a media query based on a list of conditions

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$conditions`	Media query conditions	`Arglist`	—none

Content

This mixin allows extra content to be passed (through the @content directive).

Example

With a single set breakpoint

@include media('>phone') { }

With two set breakpoints

@include media('>phone', '<=tablet') { }

With custom values

@include media('>=358px', '<850px') { }

With set breakpoints with custom values

@include media('>desktop', '<=1350px') { }

With a static expression

@include media('retina2x') { }

Mixing everything

@include media('>=350px', '<tablet', 'retina3x') { }

Requires

[function] im-intercepts-static-breakpoint
[variable] im-media-support

Author

Eduardo Boucas

Description

This mixin aims at redefining the configuration just for the scope of the call. It is helpful when having a component needing an extended configuration such as custom breakpoints (referred to as tweakpoints) for instance.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$tweakpoints`	Map of tweakpoints to be merged with `$breakpoints`	`Map`	`()`
`$tweak-media-expressions`	Map of tweaked media expressions to be merged with `$media-expression`	`Map`	`()`

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Extend the global breakpoints with a tweakpoint

@include media-context(('custom': 678px)) {
  .foo {
    @include media('>phone', '<=custom') {
     // ...
    }
  }
}

Extend the global media expressions with a custom one

@include media-context($tweak-media-expressions: ('all': 'all')) {
  .foo {
    @include media('all', '>phone') {
     // ...
    }
  }
}

Extend both configuration maps

@include media-context(('custom': 678px), ('all': 'all')) {
  .foo {
    @include media('all', '>phone', '<=custom') {
     // ...
    }
  }
}

Requires

[variable] breakpoints
[variable] media-expressions

Author

Hugo Giraudel

functions

im-intercepts-static-breakpoint

@function im-intercepts-static-breakpoint($conditions...) { ... }

View source

Description

Determines whether a list of conditions is intercepted by the static breakpoint.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$conditions`	Media query conditions	`Arglist`	—none

Returns

Boolean —

Returns true if the conditions are intercepted by the static breakpoint

Requires

[variable] breakpoints
[variable] im-no-media-breakpoint
[variable] media-expressions
[variable] im-no-media-expressions

Used by

[mixin] media