基础 - Sass 混合宏

---

---

导入

它导入位于 scss/util/_mixins.scss 文件下的 Sass 混合宏内容。您可以使用以下代码行导入 Sass 混合宏：

@import 'util/mixins';

Sass 参考

您可以使用 Sass 函数更改组件的样式。

混合宏

您可以使用以下混合宏来构建组件的 CSS 类结构。

CSS-TRIANGLE

它用于创建下拉箭头、下拉点等。它使用 <i>&::before</i> 或 <i>&::after</i> 选择器将三角形附加到现有元素。它使用以下格式：

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

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

HAMBURGER

它用于创建菜单图标，包括宽度、高度、条数和颜色。它使用以下格式：

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

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

BACKGROUND-TRIANGLE

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

@include background-triangle($color);

它使用表格中指定的参数：

CLEARFIX

此混合宏自动清除子元素，因此无需额外的标记。它使用以下格式：

@include clearfix;

AUTO-WIDTH

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

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

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

DISABLE-MOUSE-OUTLINE

它用于在识别鼠标输入操作时禁用元素周围的轮廓。它使用以下格式：

@include disable-mouse-outline;

ELEMENT-INVISIBLE

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

@include element-invisible;

ELEMENT-INVISIBLE-OFF

它用于移除不可见的元素，并通过使用 element-invisible() 混合宏来反转 CSS 输出。它使用以下格式：

@include element-invisible-off;

VERTICAL-CENTER

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

@include vertical-center;

HORIZONTAL-CENTER

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

@include horizontal-center;

ABSOLUTE-CENTER

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

@include absolute-center;