📌  相关文章
📜  Foundation-Sass Mixins

📅  最后修改于: 2020-10-25 06:02:18             🧑  作者: Mango

 

输入

它将导入放置在scss / util / _mixins.scss文件下的SASS mixin的内容。您可以使用以下代码行导入SASS mixins-

@import 'util/mixins';

Sass参考

您可以使用SASS功能更改组件的样式。

混合蛋白

您可以使用以下mixin为您的组件构建CSS类结构。

CSS三角形

它用于创建下拉箭头，下拉点等等。它使用＆:: before 或＆:: after 选择器将三角形附加到现有元素。它使用以下格式-

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

它使用表中指定的以下参数-

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

汉堡包

它用于创建具有宽度，高度，条数和颜色的菜单图标。它使用以下格式-

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

它使用表中指定的以下参数-

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

背景三角形

用于指定元素的背景图像。它使用以下格式-

@include background-triangle($color);

它使用表中指定的参数-

Sr.No. Parameter & Description Type Default Value
1 $color

It defines the color for the triangle.

 Color $black

透明修复

该mixin自动清除子元素，因此不需要其他标记。它使用以下格式-

@include clearfix;

自动宽度

它会根据容器中存在的元素数量自动调整元素大小。它使用以下格式-

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

它使用表中指定的以下参数-

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

禁用鼠标概述

当它标识鼠标输入动作时，用于禁用元素周围的轮廓。它使用以下格式-

@include disable-mouse-outline;

元素不可见

它用于隐藏元素，并且可用于键盘和其他设备。它使用以下格式-

@include element-invisible;

元素不可见

它用于删除不可见元素，并通过使用element-invisible() mixin反转CSS输出。它使用以下格式-

@include element-invisible-off;

垂直中心

通过使用以下格式，它用于将元素垂直居中放置在非静态父元素内-

@include vertical-center;

水平中心

通过使用以下格式，可将元素水平居中放置在非静态父元素内：

@include horizontal-center;

绝对中心

通过使用以下格式，可将元素绝对居中放置在非静态父元素内：

@include absolute-center;