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.

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.

#### 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