# Useful Mixins
# z-index
@mixin z-index($key) {
z-index: z-index($key);
}
1
2
3
4
2
3
4
# Optional Parameter "!important"
TIP
Use "if-important()" mixin like this in another mixin:
@mixin print-font($important: false) {
font-size: 12px if-important($important);
}
1
2
3
2
3
/**
* returns !important
* can be used as optional parameter in mixins
*/
@function if-important($important) {
@return #{if($important, '!important', '')};
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# Aligning
TIP
Align an element vertically or horizontally.
- Usage:
align($vertical: true, $horizontal: false, $position: relative)
Examples:
- Horizontal Centering:
@include align(false, true, relative); - Vertical Centering of an absolute element:
@include align(true, false, absolute);
/// @param $vertical [true] - can be true or false
/// @param $horizontal [false] - can be true or false
/// @param $position [relative] - can be 'absolute' or 'relative'
@mixin align($vertical: true, $horizontal: false, $position: relative) {
@if $position {
position: $position;
}
@if $vertical {
@if ($position == relative) {
margin-top:auto;
margin-bottom:auto;
}
@else {
top: 50%; }
}
@if $horizontal {
@if ($position == relative) {
margin-left:auto;
margin-right:auto;
}
@else {
left: 50%; }
}
@if ($position == absolute) {
@if $vertical and $horizontal {
transform: translateX(-50%) translateY(-50%);
}
@else
if $vertical {
transform: translateY(-50%);
}
@else {
transform: translateX(-50%); }
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# Clearfix
Adds clearfix to current element. Usage: @include cf;
@mixin cf {
&::after {
display:table;
clear:both;
content: '';
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# Hide and Show
/// Hide from both screenreaders and browsers
@mixin hidden {
display:none;
visibility:hidden;
}
/// Hide visually and from screenreaders, but maintain layout
@mixin invisible {
visibility:hidden;
}
/// display visually and for screenreaders
@mixin visible($state: 'block') {
display: unquote($state);
visibility:visible;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Retina Images
TIP
Mixin for using retina images (double size) as background-images
Example:
@example .element { @include retina { background-image: url(../img/background@2x.png); } }
@mixin retina {
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx)
{
@content;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# Icons
# Add Search-Icon
Adds search icon as pseudo-element
@mixin add-search-icon($position: "right") {
@include icon-css("r", "search", "solid");
&::after {
display:inline-block;
color: $primary-color;
position:absolute;
top: 8px;
@if $position == "right" {
right: 12px;
}
@else {
left: 8px; }
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Add Arrow
Adds an arrow icon as pseudo-element in the specified direction:
.-arrow-[up/down]-[left/right]
/// generates all arrow classes for a specific width, background- and border-color
/// in all horizontal and vertical positions (left, right, center, up, down)
/// @output CSS classes e.g.: -arrow-up-right
/// @param $size {Number} - widths in px (without unit)
/// @param $color {String} [$white] - the background-color
/// @param $border-color {String} [$gray] - the border-color
/// @example
/// @include generate-arrows(14, $white, $light-gray);
@mixin generate-arrows($size: 14, $color: $white, $border-color: $light-gray) {
$horizontal: ('left', 'right', 'center');
$vertical: ('up', 'down');
@each $h-position in $horizontal {
@each $v-position in $vertical {
&.-arrow-#{$v-position}-#{$h-position} {
@include css-triangle($size, $color, $border-color, $v-position, $h-position, absolute);
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Pseudo Elements
TIP
Returns default CSS properties for pseudo-elements (:before and :after)
Example: @include pseudo(block, absolute, "\f002")
/// @param $display {String} [block] - display: block, inline or inline-block
/// @param $pos {String} [absolute] - position: absolute, relative or fixed
/// @param $content {String} [""] - position: absolute, relative or fixed
@mixin pseudo($display: block, $pos: absolute, $content: '') {
display: $display;
position: $pos;
content: $content;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# Styling
# Mouseover Effect
/// adds pointer-cursor for clickable elements
@mixin hover-pointer {
&:hover, &:focus {
cursor:pointer;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# Overflow Wrap
Break multiple lines in an otherwise unbreakable place (e.g. to avoid broken layouts due to long strings)
@mixin overflow-wrap() {
overflow-wrap:break-word;
word-wrap:break-word;
hyphens:auto;
}
1
2
3
4
5
6
2
3
4
5
6