7 - Sass Mixins

Source: mixins/__documentation.scss, line 5

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allows you to produce a wide variety of styles with very few mixins.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins

7.1 - focus-style

Source: mixins/_focus-style.scss, line 11

Open in new window

@include focus-style

Global style for the focus state.

7.2 - ie-only{}

Source: mixins/_media-queries.scss, line 82

Open in new window

@include ie-only{}

Usage:

h2{@include ie-only{display: none;}

Output:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {h2{display: none;}}

7.3 - max(#{bp(your bp)}){}

Source: mixins/_media-queries.scss, line 58

Open in new window

@include max($bp, $min: "null", $device: "screen"){}

/!\ Atomic Bulldog is mobile first, it is not recommended to use max media queries

Parameters:

$bp - Breakpoints are defines in the map variables $breakpoints, breakpoints can be called with the function bp(). As we call a function inside a mixin we will need to use sass interpolation, #{bp()}. This will return a value in em.
$min - Optional min value, using $breakpoints map
$device - Default screen

Usage:

h2{@include max(#{bp(sm)}){font-size: font-size(2);}}

Output:

@media only screen and (max-width: 36em) {h2{font-size: 2.5rem;}

7.4 - min(#{bp(your bp)}){}

Source: mixins/_media-queries.scss, line 36

Open in new window

@include min($bp, $max: "null", $device: "screen"){}

Parameters:

$bp - Breakpoints are defines in the map variables $breakpoints, breakpoints can be called with the function bp(). As we call a function inside a mixin we will need to use sass interpolation, #{bp()}. This will return a value in em.
$max - Optional max value, using $breakpoints map
$device - Default screen

Usage:

h2{@include min(#{bp(sm)}){font-size: font-size(2);}}

Output:

@media only screen and (min-width: 36em) {h2{font-size: 2.5rem;}