基金会 - Sass Mixins( Sass Mixins)
Importing
它导入位于scss/util/_mixins.scss文件下的SASS mixins的内容。 您可以使用以下代码行导入SASS mixins -
@import 'util/mixins';
Sass参考
您可以使用SASS功能更改组件的样式。
Mixins
您可以使用以下mixins为您的组件构建CSS类结构。
CSS-TRIANGLE
它用于创建下拉箭头，下拉点等等。 它使用＆:: before i>或＆:: after i>选择器将三角形附加到现有元素。 它使用以下格式 -
@include css-triangle($triangle-size, $triangle-color, $triangle-direction);
它使用表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $triangle-size 它定义了三角形的宽度。 | Number | None |
| 2 | $triangle-color 它定义了三角形的颜色。 | Color | None |
| 3 | $triangle-direction 它定义了三角形的方向，例如向上，向右，向下或向左。 | Keyword | None |
HAMBURGER
它用于创建具有宽度，高度，条数和颜色的菜单图标。 它使用以下格式 -
@include hamburger($color, $color-hover, $width, $height, $weight, $bars);
它使用表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $color 它定义图标的颜色。 | Color | None |
| 2 | $color-hover 它将鼠标悬停在图标上时定义颜色。 | Color | None |
| 3 | $width 它定义了图标的宽度。 | Number | None |
| 4 | $height 它定义了图标的高度。 | Number | None |
| 5 | $weight 它定义图标中各个条的权重。 | Number | None |
| 6 | $bars 它定义图标中的条数。 | Number | None |
BACKGROUND-TRIANGLE
它用于指定元素的背景图像。 它使用以下格式 -
@include background-triangle($color);
它使用表中指定的参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $color 它定义了三角形的颜色。 | Color | $black |
CLEARFIX
这个mixin会自动清除子元素，因此不需要额外的标记。 它使用以下格式 -
@include clearfix;
AUTO-WIDTH
它根据容器中存在的元素数量自动调整元素的大小。 它使用以下格式 -
@include auto-width($max, $elem);
它使用表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $max 它标识容器中的最大项目数。 | Number | None |
| 2 | $elem 它为兄弟选择器使用标签。 | Keyword | li |
DISABLE-MOUSE-OUTLINE
它用于在识别鼠标输入操作时禁用元素周围的轮廓。 它使用以下格式 -
@include disable-mouse-outline;
ELEMENT-INVISIBLE
它用于隐藏元素，可用于键盘和其他设备。 它使用以下格式 -
@include element-invisible;
ELEMENT-INVISIBLE-OFF
它用于删除不可见元素并使用element-invisible() mixin反转CSS输出。 它使用以下格式 -
@include element-invisible-off;
VERTICAL-CENTER
它用于通过使用以下格式将元素垂直居中放置在非静态父元素内 -
@include vertical-center;
HORIZONTAL-CENTER
它用于通过使用以下格式将元素水平居中放置在非静态父元素内 -
@include horizontal-center;
ABSOLUTE-CENTER
它用于通过使用以下格式将元素绝对居中放置在非静态父元素中 -
@include absolute-center;
