Foundation - Sass Mixins

Importing

It imports the contents of the SASS mixins which are placed under the scss/util/_mixins.scss file. You can import the SASS mixins by using below line of code:

@import 'util/mixins';

Sass Reference

You can change the styles of the components by using SASS functions.

Mixins

You can use the following mixins to build the CSS class structure for your components.

css-triangle

It is used for creating dropdown arrows, dropdown pips and many more. It uses &::before or &::after selector for attaching triangle to an existing element. It uses below format:

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

It uses folowing parameters as specified in the table:

S.N.	Parameter & Description	Type	Default Value
1	$triangle-size It defines width of the triangle.	Number	None
2	$triangle-color It defines color of the triangle.	Color	None
3	$triangle-direction It defines direction of the triangle such as up, right, down or left.	Keyword	None

hamburger

It is used for creating menu icon with width, height, number of bars and colors. It uses below format:

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

It uses folowing parameters as specified in the table:

S.N.	Parameter & Description	Type	Default Value
1	$color It defines color for the icon.	Color	None
2	$color-hover It defines color when you hover on the icon.	Color	None
3	$width It defines width of the icon.	Number	None
4	$height It defines height of the icon.	Number	None
5	$weight It defines weight of individual bars in the icon.	Number	None
6	$bars It defines number of bars in the icon.	Number	None

background-triangle

It is used for specifying background image to an element. It uses below format:

@include background-triangle($color);

It uses the parameter as specified in the table:

S.N.	Parameter & Description	Type	Default Value
1	$color It defines color for the triangle.	Color	$black

clearfix

This mixin automatically clears the children elements, so that there is no need of additional markup. It uses below format:

@include clearfix;

auto-width

It automatically sizes the elements based on the number of elements present in the container. It uses below format:

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

It uses following parameters as specified in the table:

S.N.	Parameter & Description	Type	Default Value
1	$max It identifies the maximum number of items in the container.	Number	None
2	$elem It uses tag for sibling selectors.	Keyword	li

disable-mouse-outline

It is used to disable the outline around the element when it identifies the mouse input action. It uses below format:

@include disable-mouse-outline;

element-invisible

It is used to hide the elements and can be available to keyboards and other devices. It uses below format:

@include element-invisible;

element-invisible-off

It is used to remove the invisible of elements and reverses the CSS output by using the element-invisible() mixin. It uses below format:

@include element-invisible-off;

vertical-center

It is used to place the elements vertically center inside the non static parent element by using the below format:

@include vertical-center;

horizontal-center

It is used to place the elements horizontally center inside the non static parent element by using the below format:

@include horizontal-center;

absolute-center

It is used to place the elements absolutely center inside the non static parent element by using the below format:

@include absolute-center;