General

variables

breakpoints

$breakpoints: (
  'phone': 480px,
  'tablet': 768px,
  'desktop': 1024px
) !default;

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
[function] get-expression-value
[mixin] media-context

Author

Eduardo Boucas

media-expressions

$media-expressions: (
  'screen': 'screen',
  'print': 'print',
  'handheld': 'handheld',
  'landscape': '(orientation: landscape)',
  'portrait': '(orientation: portrait)',
  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
  'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)'
) !default;

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
[function] parse-expression
[mixin] media-context

Author

Eduardo Boucas

unit-intervals

$unit-intervals: (
  'px': 1,
  'em': 0.01,
  'rem': 0.1
) !default;

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) {}

Used by

[function] get-expression-value

Author

Eduardo Boucas

im-media-support

$im-media-support: true !default;

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

im-no-media-breakpoint

$im-no-media-breakpoint: 'desktop' !default;

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

im-no-media-expressions

$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;

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

functions

log

@function log($message) { ... }

Description

Log a message either with @error if supported else with @warn, using feature-exists('at-error') to detect support.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$message`	Message to log	`String`	—none

Requires

[function] noop

Used by

[mixin] log
[function] im-intercepts-static-breakpoint
[function] get-expression-operator
[function] get-expression-value
[function] to-number
[function] to-length

Author

Eduardo Boucas

noop

@function noop() { ... }

Description

Function with no @return called next to @warn in Sass 3.3 to trigger a compiling error and stop the process.

Parameters

None.

Used by

[function] log

Author

Eduardo Boucas

im-intercepts-static-breakpoint

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

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

[function] log
[function] get-expression-operator
[function] get-expression-prefix
[function] get-expression-value
[variable] breakpoints
[variable] im-no-media-breakpoint
[variable] media-expressions
[variable] im-no-media-expressions

Used by

[mixin] media

Author

Eduardo Boucas

get-expression-operator

@function get-expression-operator($expression) { ... }

Description

Get operator of an expression

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$expression`	Expression to extract operator from	`String`	—none

Returns

String —

Any of >=, >, <=, <, ≥, ≤

Requires

[function] log

Used by

[function] im-intercepts-static-breakpoint
[function] parse-expression

Author

Eduardo Boucas

get-expression-dimension

@function get-expression-dimension($expression, $operator) { ... }

Description

Get dimension of an expression, based on a found operator

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$expression`	Expression to extract dimension from	`String`	—none
`$operator`	Operator from `$expression`	`String`	—none

Returns

String —

width or height (or potentially anything else)

Used by

[function] parse-expression

Author

Eduardo Boucas

get-expression-prefix

@function get-expression-prefix($operator) { ... }

Description

Get dimension prefix based on an operator

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$operator`	Operator	`String`	—none

Returns

String —

min or max

Used by

[function] im-intercepts-static-breakpoint
[function] parse-expression

Author

Eduardo Boucas

get-expression-value

@function get-expression-value($expression, $operator) { ... }

Description

Get value of an expression, based on a found operator

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$expression`	Expression to extract value from	`String`	—none
`$operator`	Operator from `$expression`	`String`	—none

Returns

Number —

A numeric value

Requires

[function] to-number
[function] log
[variable] breakpoints
[variable] unit-intervals

Used by

[function] im-intercepts-static-breakpoint
[function] parse-expression

Author

Eduardo Boucas

parse-expression

@function parse-expression($expression) { ... }

Description

Parse an expression to return a valid media-query expression

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$expression`	Expression to parse	`String`	—none

Returns

String —

Valid media query

Requires

[function] get-expression-operator
[function] get-expression-dimension
[function] get-expression-prefix
[function] get-expression-value
[variable] media-expressions

Used by

[mixin] media

Author

Eduardo Boucas

[private] slice

@function slice($list, $start: 1, $end: length($list)) { ... }

Description

Slice $list between $start and $end indexes

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$list`	List to slice	`List`	—none
`$start`	Start index	`Number`	`1`
`$end`	End index	`Number`	`length($list)`

Returns

List —

Sliced list

Used by

[mixin] media

Author

Eduardo Boucas

to-number

@function to-number($value) { ... }

Description

Casts a string into a number

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	Value to be parsed	`String` or `Number`	—none

Returns

Number

Requires

[function] log
[function] to-length

Used by

[function] get-expression-value

Author

Eduardo Boucas

to-length

@function to-length($value, $unit) { ... }

Description

Add $unit to $value

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	Value to add unit to	`Number`	—none
`$unit`	String representation of the unit	`String`	—none

Returns

Number —

$value expressed in $unit

Requires

[function] log

Used by

[function] to-number

Author

Eduardo Boucas

mixins

log

@mixin log($message) { ... }

Description

Wrapper mixin for the log function so it can be used with a more friendly API than @if log('..') {} or $_: log('..'). Basically, use the function within functions because it is not possible to include a mixin in a function and use the mixin everywhere else because it's much more elegant.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$message`	Message to log	`String`	—none

Requires

[function] log

Author

Eduardo Boucas

media-context

@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) { ... }

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

media

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

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
[function] parse-expression
[function] slice
[variable] im-media-support

Author

Eduardo Boucas