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 the following line of code −

@import 'util/mixins';

Sass Reference

You can change the styles of the components by using the 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 <i>&::before</i> or <i>&::after</i> selector for attaching a triangle to an existing element. It uses the following format −

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

It uses following parameters as specified in the table −

Sr.No.	Parameter & Description	Type	Default Value
1	$triangle-sizeIt defines the width of the triangle.	Number	None
2	$triangle-colorIt defines the color of the triangle.	Color	None
3	$triangle-directionIt defines the 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 the following format −

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

It uses following parameters as specified in the table −

Sr.No.	Parameter & Description	Type	Default Value
1	$colorIt defines the color for the icon.	Color	None
2	$color-hoverIt defines the color when you hover on the icon.	Color	None
3	$widthIt defines the width of the icon.	Number	None
4	$heightIt defines the height of the icon.	Number	None
5	$weightIt defines the weight of individual bars in the icon.	Number	None
6	$barsIt defines the number of bars in the icon.	Number	None

BACKGROUND-TRIANGLE

It is used for specifying the background image to an element. It uses the following format −

@include background-triangle($color);

It uses the parameter as specified in the table −

Sr.No.	Parameter & Description	Type	Default Value
1	$colorIt defines the 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 the following format −

@include clearfix;

AUTO-WIDTH

It automatically sizes the elements based on the number of elements present in the container. It uses the following format −

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

It uses the following parameters as specified in the table −

Sr.No.	Parameter & Description	Type	Default Value
1	$maxIt identifies the maximum number of items in the container.	Number	None
2	$elemIt uses a 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 the following 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 the following format −

@include element-invisible;

ELEMENT-INVISIBLE-OFF

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

@include element-invisible-off;

VERTICAL-CENTER

It is used to place the elements vertically-centered inside the non-static parent element by using the following format −

@include vertical-center;

HORIZONTAL-CENTER

It is used to place the elements horizontally-centered inside the non-static parent element by using the following format −

@include horizontal-center;

ABSOLUTE-CENTER

It is used to place the elements absolutely-centered inside the non-static parent element by using the following format −

@include absolute-center;