”;
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;
”;