General Utility Mixins

These are intended to abstract out common code that depends on an argument.

Utility to simply strip units from any value.

@function strip-unit($value)

Rem with pixel fallback for font sizes.

+font-size($sizeValue: 14)

Vertically center using line-height (not suitable for multiple lines of text).

+vertically-center($x: 20)

Style input placeholders (Pass in a content block).


Create square dimenstions based on width, returns width & height.

+size($w, $h: $w)

Gradient Background overlay (for images).

+image-overlay--gradient( $color-start: $darkgray, $opacity-start: 0.5, $color-end: #FFF, $opacity-end: 0, $start: 0, $stop: 35% )

Flat Background overlay (for images). 35% percent.

+image-overlay--flat( $percent: 0.35, $color: $darkgray )

A mixin to help clean up z-index madness. Options are: `below`, `default`, `middle`, `top`, `modal`, and `above-ad`

+z-layer( $layer: default )

Specify user avatar size and make it round.