Sass Mixins

Mixins allow us to reuse code in various parts of the framework. Foundation includes mixins for clearfixes, visibility, icons, shapes, and more.

Importing

Foundation's Sass mixins are all kept in one file: scss/util/_mixins.scss. To import it in Sass, use this line of code:

@import 'util/mixins';

Note: These mixins are included by default when using the ZURB Stack and Basic Template Starter Projects.

General Mixins

Foundation includes some handy Sass mixins to quickly create styles or to extend and truly customize an existing component. Here is a list of available mixins:

Prototyping Utility Mixins

Quickly prototype layouts and UI with Foundation's Prototyping Utility mixins. These mixins are great realizing your sketches and mockups into hi-fi coded prototype's ultra fast. Learn more about Prototyping Utilities

Here is a list of available mixins:


Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$prototype-arrow-directions Map down
up
right
left

Map containing all the arrow direction

$prototype-arrow-size Number 0.4375rem

Width of the Arrow, 0.4375rem by default.

$prototype-arrow-color Color $black

Color of the Arrow, $black by default.

$prototype-border-box-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for border box.

$prototype-border-none-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for border none.

$prototype-bordered-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for bordered utility.

$prototype-border-width Number rem-calc(1)

Default value for prototype-border-width

$prototype-border-type String solid

Default value for prototype-border-type

$prototype-border-color Color $medium-gray

Default value for prototype-border-color defaulted to medium-gray

$prototype-display-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for display classes

$prototype-display Map inline
inline-block
block
table
table-cell

Map containing all the display classes

$prototype-font-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for font styling types

$prototype-wide-letter-spacing Number rem-calc(4)

Letter spacing for .font-wide

$prototype-font-normal Number $global-weight-normal

Default weight for .font-normal, defaulted to global-weight-normal

$prototype-font-bold Number $global-weight-bold

Default weight for .font-bold, defaulted to global-weight-bold

$prototype-list-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for list styling types

$prototype-style-type-unordered Map disc
circle
square

Map containing all the style-type-unordered classes

$prototype-style-type-ordered Map decimal
lower-alpha
lower-latin
lower-roman
upper-alpha
upper-latin
upper-roman

Map containing all the style-type-ordered classes

$prototype-overflow-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for overflow helper classes

$prototype-overflow Map visible
hidden
scroll

Map containing all the overflow classes

$prototype-position-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for position helpers

$prototype-position Map static
relative
absolute
fixed

Map containing all the position classes

$prototype-position-z-index Number 975

z-index for fixed positioning

$prototype-rounded-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for rounded utility.

$prototype-border-radius Number rem-calc(3)

Default value for prototype-border-radius

$prototype-separator-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for separator.

$prototype-separator-align String center

Default alignment of a separator.

$prototype-separator-height Number rem-calc(2)

Height of a separator.

$prototype-separator-width Number 3rem

Width of a separator.

$prototype-separator-background Color $primary-color

Default color of a separator.

$prototype-separator-margin-top Number $global-margin

Top Margin of a separator.

$prototype-shadow-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for shadow utility.

$prototype-box-shadow Number 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12)

Default value for prototype-box-shadow

$prototype-sizing-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for spacing classes (margin and padding)

$prototype-sizing Map width
height

Map containing all the sizing classes

$prototype-sizes Map 25: 25%
50: 50%
75: 75%
100: 100%

Map containing all the sizes.

$prototype-spacing-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for spacing classes (margin and padding)

$prototype-spacers-count Number 3

Default number of spacers count (margin and padding)

$prototype-decoration-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for text decoration classes

$prototype-text-decoration Map overline
underline
line-through

Map containing all the text-decoration classes

$prototype-transformation-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for text transformation classes

$prototype-text-transformation Map lowercase
uppercase
capitalize

Map containing all the text-transformation classes

$prototype-utilities-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for text utilities

$prototype-text-overflow String ellipsis

Default Value for text-overflow variable


Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

inner-side-shadow

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

Creates an inner box-shadow for only one side

ParameterTypeDefault ValueDescription
$side Keyword None

Side the shadow is supposed to appear. Can be top, left, right or bottom.

$size Number None

Width for the target side.

$color Color None

Color of the shadow.


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.

ParameterTypeDefault ValueDescription
$triangle-size Number None

Width of the triangle.

$triangle-color Color None

Color of the triangle.

$triangle-direction Keyword None

Direction the triangle points. Can be up, right, down, or left.


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.

ParameterTypeDefault ValueDescription
$color Color $black

Color to use for the icon.

$color-hover Color $dark-gray

Color to use when the icon is hovered over.

$width Number 20px

Width of the icon.

$height Number 16px

Height of the icon.

$weight Number 2px

Height of individual bars in the icon.

$bars Number 3

Number of bars in the icon.


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.

ParameterTypeDefault ValueDescription
$color Color $black

Color to use for the triangle.


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

ParameterTypeDefault ValueDescription
$max Number None

Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.

$elem Keyword li

Tag to use for sibling selectors.


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;

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;

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.

ParameterTypeDefault ValueDescription
$width Number $prototype-border-width

Width of the border

$type String $prototype-border-type

Type of the border

$color Color $prototype-border-color

Color of the border


box

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

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

ParameterTypeDefault ValueDescription
$width Number None

Width of the box

$height Number $width

Height of the box, defaults to $width to easily make a square

$circle Boolean false

Makes the box a circle, by default false.


display

@include display($display);

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

ParameterTypeDefault ValueDescription
$display String None

Display classes


font-wide

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

Font wide letter spacing!

ParameterTypeDefault ValueDescription
$letter-spacing Number $prototype-wide-letter-spacing

Wide letter spacing for the font


font-normal

@include font-normal($weight);

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

ParameterTypeDefault ValueDescription
$weight Number $prototype-font-normal

Weight of the font (normal)


font-bold

@include font-bold($weight);

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

ParameterTypeDefault ValueDescription
$weight Number $prototype-font-bold

Weight of the font (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

ParameterTypeDefault ValueDescription
$style-type-unordered String None

Style type for unordered Lists


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

ParameterTypeDefault ValueDescription
$style-type-ordered String None

Style type for ordered Lists


overflow

@include overflow($overflow);

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

ParameterTypeDefault ValueDescription
$overflow String None

Overflow classes


overflow-x

@include overflow-x($overflow);

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

ParameterTypeDefault ValueDescription
$overflow String None

Overflow classes (horizontal axis)


overflow-y

@include overflow-y($overflow);

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

ParameterTypeDefault ValueDescription
$overflow String None

Overflow classes (vertical axis)


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.

ParameterTypeDefault ValueDescription
$position String None

Position classes, Either static, relative, absolute or fixed

$top Number null

Top offset

$right Number null

Right offset

$bottom Number null

Bottom offset

$left Number null

Left offset


position-fixed-top

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

Position Fixed on top corners

ParameterTypeDefault ValueDescription
$z-index Number $prototype-position-z-index

z-index for position-fixed-top


position-fixed-bottom

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

Position Fixed on bottom corners

ParameterTypeDefault ValueDescription
$z-index Number $prototype-position-z-index

z-index for position-fixed-bottom


rotate

@include rotate($deg);

Rotate Mixin: Rotate an element to a certain deg

ParameterTypeDefault ValueDescription
$deg Number None

Degree of rotation


rotateX

@include rotateX($deg);

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

ParameterTypeDefault ValueDescription
$deg Number None

Degree of rotation


rotateY

@include rotateY($deg);

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

ParameterTypeDefault ValueDescription
$deg Number None

Degree of rotation


rotateZ

@include rotateZ($deg);

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

ParameterTypeDefault ValueDescription
$deg Number None

Degree of rotation


border-radius

@include border-radius($radius);

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

ParameterTypeDefault ValueDescription
$radius Number $prototype-border-radius

Border radius (all corners)


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

ParameterTypeDefault ValueDescription
$align String $prototype-separator-align

separator Alignment

$height Number $prototype-separator-height

Width

$width Number $prototype-separator-width

Height

$background Color $prototype-separator-background

Background

$top Number $prototype-separator-margin-top

Margin Top


shadow

@include shadow($shadow);

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

ParameterTypeDefault ValueDescription
$shadow Number $prototype-box-shadow

Box Shadow of a component


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

ParameterTypeDefault ValueDescription
$top Number null

Margin Top

$right Number null

Margin Right

$bottom Number null

Margin Bottom

$left Number null

Margin Left


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

ParameterTypeDefault ValueDescription
$top Number null

Padding Top

$right Number null

Padding Right

$bottom Number null

Padding Bottom

$left Number null

Padding Left


text-decoration

@include text-decoration($decoration);

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

ParameterTypeDefault ValueDescription
$decoration String None

Text Decoration


text-transform

@include text-transform($transformation);

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

ParameterTypeDefault ValueDescription
$transformation String None

Text Transformation


text-hide

@include text-hide;

Image Replacement utility. text-hide


text-truncate

@include text-truncate($overflow);

Truncating the text, elipsis by default.

ParameterTypeDefault ValueDescription
$overflow String $prototype-text-overflow

Text Truncate


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.

ParameterTypeDefault ValueDescription
$num Number None

First n numbers of total children


first-child

@include first-child { }

Select the first exact child


last

@include last($num) { }

Select all children from the last to $num.

ParameterTypeDefault ValueDescription
$num Number None

Last n numbers of total children


last-child

@include last-child { }

Select the last exact child


every

@include every($num) { }

Select children every $num.

ParameterTypeDefault ValueDescription
$num Number None

Every n number of all children


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.

ParameterTypeDefault ValueDescription
$num Number None

After First n numbers of total children


from-last

@include from-last($num) { }

Select all children before $num from the last.

ParameterTypeDefault ValueDescription
$num Number None

From Last n numbers of total children


from-first-last

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

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

ParameterTypeDefault ValueDescription
$num Number None

n number called from first and last


all-but

@include all-but($num) { }

Select all children but $num.

ParameterTypeDefault ValueDescription
$num Number None

n number that should be excluded from all other children


all-but-first-last

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

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

ParameterTypeDefault ValueDescription
$num Number None

n number excluded from first and last from all other children


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.

ParameterTypeDefault ValueDescription
$first Number None

First nth number

$last Number None

Last nth number


even

@include even { }

Select all even children.


even-between

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

Select all even children between $first and $last.

ParameterTypeDefault ValueDescription
$first Number None

First nth number

$last Number None

Last nth number


odd

@include odd { }

Select all odd children.


odd-between

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

Select all odd children between $first and $last.

ParameterTypeDefault ValueDescription
$first Number None

First nth number

$last Number None

Last nth number


number-between

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

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

ParameterTypeDefault ValueDescription
$num Number None

Every n number between $first and $last.

$first Number None

First n number

$last Number None

Last n number