Sass Mixins

inner-side-shadow

@include inner-side-shadow($side, $size, $color);

Creates an inner box-shadow for only one side

css-triangle

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a &::before or &::after selector, to attach the triangle to an existing element.

hamburger

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing.

background-triangle

@include background-triangle($color);

Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included. There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.

clearfix

@include clearfix;

Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height. The clearfix is augmented with specific styles to prevent borders in flexbox environments

Learn more: Micro Clearfix Hack

auto-width

@include auto-width($max, $elem);

Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.

Learn more: Quantity Queries for CSS

disable-mouse-outline

@include disable-mouse-outline;

Removes the focus ring around an element when a mouse input is detected.

element-invisible

@include element-invisible($enforce);

Makes an element visually hidden, but still accessible to keyboards and assistive devices.

Learn more: Hiding Content for Accessibility

element-invisible-off

@include element-invisible-off($enforce);

Reverses the CSS output created by the element-invisible() mixin.

vertical-center

@include vertical-center;

Vertically centers the element inside of its first non-static parent,

Learn more: Centering With Sass

horizontal-center

@include horizontal-center;

Horizontally centers the element inside of its first non-static parent,

Learn more: Centering With Sass

absolute-center

@include absolute-center;

Absolutely centers the element inside of its first non-static parent,

Learn more: Centering With Sass

border-box

@include border-box;

Border box utility

border-none

@include border-none;

Border none utility

bordered

@include bordered($width, $type, $color);

Bordered Utility: Adds a light border to an element by default.

box

@include box($width, $height, $circle);

Box Mixin: Easily create a square, rectangle or a circle

display

@include display($display);

Display classes, by default coming through a map $prototype-display

font-wide

@include font-wide($letter-spacing);

Font wide letter spacing!

font-normal

@include font-normal($weight);

Font Weight Normal, default value coming through global-weight-normal

font-bold

@include font-bold($weight);

Font Weight Bold, default value coming through global-weight-bold

font-italic

@include font-italic;

Font Style Italic

style-type-unordered

@include style-type-unordered($style-type-unordered);

Style type for unordered Lists, by default coming through a map $prototype-style-type-unordered

style-type-ordered

@include style-type-ordered($style-type-ordered);

Style type for ordered Lists, by default coming through a map $prototype-style-type-ordered

overflow

@include overflow($overflow);

Overflow classes, by default coming through a map $prototype-overflow

overflow-x

@include overflow-x($overflow);

Overflow classes on horizontal axis, by default coming through a map $prototype-overflow

overflow-y

@include overflow-y($overflow);

Overflow classes on vertical axis, by default coming through a map $prototype-overflow

position

@include position($position, $top, $right, $bottom, $left);

Position classes, by default coming through a map $prototype-position, whereas all the offset values are multiplied by $global-position which by default is equal to 1rem.

position-fixed-top

@include position-fixed-top($z-index);

Position Fixed on top corners

position-fixed-bottom

@include position-fixed-bottom($z-index);

Position Fixed on bottom corners

rotate

@include rotate($deg);

Rotate Mixin: Rotate an element to a certain deg

rotateX

@include rotateX($deg);

RotateX Mixin: Rotate an element to a certain deg on X-Axis

rotateY

@include rotateY($deg);

RotateY Mixin: Rotate an element to a certain deg on Y-Axis

rotateZ

@include rotateZ($deg);

RotateZ Mixin: Rotate an element to a certain deg on Z-Axis

border-radius

@include border-radius($radius);

Rounded utility (all corners): Adds radius corners (all corners) to an element by default.

border-rounded

@include border-rounded;

Rounded square utility or rectangle utility (all corners): Rounds all corners to an element by default to make a pill shape.

separator

@include separator($align, $height, $width, $background, $top);

Title separator Utility, mostly used to style the main heading of a section

shadow

@include shadow($shadow);

Shadow Utility: Adds a light box shadow to an element by default.

max-width-100

@include max-width-100;

Max Width 100 utility.

max-height-100

@include max-height-100;

Max Height 100 utility.

margin

@include margin($top, $right, $bottom, $left);

Margin helper mixin, all the values are multiplied by $global-margin which by default is equal to 1rem

padding

@include padding($top, $right, $bottom, $left);

Padding helper mixin, all the values are multiplied by $global-padding which by default is equal to 1rem

margin-direction

@include margin-direction($dir, $spacer);

Margin classes for specific direction properties

padding-direction

@include padding-direction($dir, $spacer);

Padding classes for specific direction properties

text-decoration

@include text-decoration($decoration);

Text Decoration, by default coming through a map $prototype-text-decoration

text-transform

@include text-transform($transformation);

Text Transformation, by default coming through a map $prototype-text-transformation

text-hide

@include text-hide;

Image Replacement utility. text-hide

text-truncate

@include text-truncate($overflow);

Truncating the text, elipsis by default.

text-nowrap

@include text-nowrap;

No wrapping of the text. text-nowrap

text-wrap

@include text-wrap;

Wrapping of the text. text-wrap

first

@include first($num) { }

Select all children from the first to $num.

first-child

@include first-child { }

Select the first exact child

last

@include last($num) { }

Select all children from the last to $num.

last-child

@include last-child { }

Select the last exact child

every

@include every($num) { }

Select children every $num.

first-last

@include first-last { }

Select only the first and last child.

after-first

@include after-first($num) { }

Select all children after the first to $num.

from-last

@include from-last($num) { }

Select all children before $num from the last.

from-first-last

@include from-first-last($num) { }

Select the $num child from the first and the $num child from the last.

all-but

@include all-but($num) { }

Select all children but $num.

all-but-first-last

@include all-but-first-last($num) { }

Select all children between the $num first and the $num last.

unique

@include unique { }

Will only select the child if it's unique. That means that if there are at least 2 children, the style will not be applied.

not-unique

@include not-unique { }

Will only select children if they are not unique. That means that if there are at least 2 children, the style will be applied.

between

@include between($first, $last) { }

Select all children between $first and $last.

even

@include even { }

Select all even children.

even-between

@include even-between($first, $last) { }

Select all even children between $first and $last.

odd

@include odd { }

Select all odd children.

odd-between

@include odd-between($first, $last) { }

Select all odd children between $first and $last.

number-between

@include number-between($num, $first, $last) { }

Select all $num children between $first and $last.