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.

Parameter	Type	Default Value	Description
`$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.

Parameter	Type	Default Value	Description
`$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.

Parameter	Type	Default Value	Description
`$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

Parameter	Type	Default Value	Description
`$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.