导入
它导入位于 scss/util/_mixins.scss 文件下的SASS mixins的内容.您可以使用以下代码行导入SASS mixins :
@import'util/mixins';
Sass参考
您可以使用SASS功能更改组件的样式.
Mixins
您可以使用以下mixins为您的组件构建CSS类结构.
CSS-三角
它用于创建下拉箭头，下拉点等等.它使用< i>& :: before或< i>& :: after用于将三角形附加到现有元素的选择器.它使用以下格式 :
@include css-triangle($triangle-size, $triangle-color, $triangle-direction);
它使用表中指定的以下参数 :
| Sr.No. | 参数&安培;说明 | 输入 | 默认值 |
|---|---|---|---|
| 1 | $triangle-size 它定义三角形的宽度. | Number | 无 |
| 2 | $ triangle-color 它定义了三角形的颜色. | 颜色 | 无 |
| 3 | $ triangle-direction 它定义了三角形的方向，例如向上，向右，向下或向左. | 关键字 | 无 |
HAMBURGER
它用于创建具有宽度，高度，条数和颜色的菜单图标.它使用以下格式 :
@include hamburger($color, $color-hover, $width, $height, $weight, $bars);
它使用表中指定的以下参数 :
| Sr.No. | 参数&安培;说明 | 输入 | 默认值 |
|---|---|---|---|
| 1 | $color 它定义了图标的颜色. | 颜色 | 无 |
| 2 | $ color-hover 它定义悬停在图标上的颜色. | 颜色 | 无 |
| 3 | $ width 它定义了图标的宽度. | 数字 | 无 |
| 4 | $ height 它定义了图标的高度. | Number | 无 |
| 5 | $ we ight 它定义了图标中单个条形的权重. | Number | 无 |
| 6 | $ bars 它定义了图标中的条形数. | 数字 | 无 |
BACKGROUND-TRIANGLE
它用于指定元素的背景图像.它使用以下格式 :
@include background-triangle($color);
它使用表中指定的参数 :
| Sr.No. | 参数&安培;说明 | 输入 | 默认值 |
|---|---|---|---|
| 1 | $color 它定义了三角形的颜色. | 颜色 | $ black |
CLEARFIX
这个mixin自动清除子元素，因此不需要额外的标记.它使用以下格式 :
@include clearfix;
自动宽度
它会根据元素的数量自动调整元素的大小存在于容器中.它使用以下格式 :
@include auto-width($ max，$elem);
它使用表中指定的以下参数 :
| Sr.No. | 参数&说明 | 输入 | 默认值 |
|---|---|---|---|
| 1 | $ max 它标识容器中的最大项目数. | Number | 无 |
| 2 | $ elem 它为兄弟选择器使用标签. | 关键字 | 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;