Foundation
Jump to Nav

Sass Mixins


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

Sass Reference

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.

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