Foundation - Sass Mixins

Advertisements

Previous Page
Next Page  

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

It defines the width of the triangle.

 Number None
2

$triangle-color

It defines the color of the triangle.

 Color None
3

$triangle-direction

It 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

$color

It defines the color for the icon.

 Color None
2

$color-hover

It defines the color when you hover on the icon.

 Color None
3

$width

It defines the width of the icon.

 Number None
4

$height

It defines the height of the icon.

 Number None
5

$weight

It defines the weight of individual bars in the icon.

 Number None
6

$bars

It 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

$color

It 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

$max

It identifies the maximum number of items in the container.

 Number None
2

$elem

It 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;
Advertisements