Useful Mixins

z-index

TIP

Example usage: @include z-index("modal")

See z-index Function for a list of keys.

@mixin z-index($key) {
  z-index: z-index($key);
}

Optional Parameter "!important"

TIP

Use "if-important()" mixin like this in another mixin:

@mixin print-font($important: false) {
  font-size: 12px if-important($important);
}

/**
  * returns !important
  * can be used as optional parameter in mixins
 */
@function if-important($important) {
    @return #{if($important, '!important', '')};

}

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%); }
}

}

Clearfix

Adds clearfix to current element. Usage: @include cf;

@mixin cf {
  &::after {
    display:table;
    clear:both;
    content: '';
  }
}

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;
}

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;
  }
}

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;
    }
  }
}

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

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;
}

Styling

Mouseover Effect

/// adds pointer-cursor for clickable elements
@mixin hover-pointer {
  &:hover, &:focus {
    cursor:pointer;
}

}

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;
}