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