基础 - Sass Mixins

输入

它导入位于scss/util/_mixins.scss文件下的 SASS mixins 的内容。您可以使用以下代码行导入 SASS mixins -

@import 'util/mixins';

Sass 参考

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

混入

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

CSS-三角形

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

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

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

先生。 参数及说明 类型 默认值
1

$三角形大小

它定义了三角形的宽度。

 数字 没有任何
2

$三角形颜色

它定义了三角形的颜色。

 颜色 没有任何
3

$三角形方向

它定义了三角形的方向，例如上、右、下或左。

 关键词 没有任何

汉堡包

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

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

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

先生。 参数及说明 类型 默认值
1

$颜色

它定义图标的颜色。

 颜色 没有任何
2

$颜色悬停

它定义将鼠标悬停在图标上时的颜色。

 颜色 没有任何
3

$宽度

它定义了图标的宽度。

 数字 没有任何
4

$高度

它定义了图标的高度。

 数字 没有任何
5

$重量

它定义了图标中各个条的权重。

 数字 没有任何
6

$酒吧

它定义了图标中的条数。

 数字 没有任何

背景-三角形

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

@include background-triangle($color);

它使用表中指定的参数 -

先生。 参数及说明 类型 默认值
1

$颜色

它定义三角形的颜色。

 颜色 $黑色

清除修复

这个 mixin 会自动清除子元素，因此不需要额外的标记。它使用以下格式 -

@include clearfix;

自动宽度

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

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

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

先生。 参数及说明 类型 默认值
1

最高$

它标识容器中物品的最大数量。

 数字 没有任何
2

$元素

它使用同级选择器标签。

 关键词 李

禁用鼠标轮廓

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

@include disable-mouse-outline;

元素不可见

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

@include element-invisible;

元素-不可见-关闭

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

@include element-invisible-off;

垂直居中

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

@include vertical-center;

水平居中

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

@include horizontal-center;

绝对中心

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

@include absolute-center;