Foundation Sass Mixins

导入

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

@import 'util/mixins';

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

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

CSS-三角形

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

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

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

参数和说明	输入	默认值
$triangle-size 它定义了三角形的宽度。	数字	无
$triangle-color 定义三角形的颜色。	颜色	无
$triangle-direction 它定义了三角形的方向，如上、右、下或左。	关键字	无

汉堡

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

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

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

参数和说明	输入	默认值
$color 它定义了图标的颜色。	颜色	无
$color-hover 它定义了鼠标悬停在图标上时的颜色。	颜色	无
$width 它定义了图标的宽度。	数字	无
$height 它定义了图标的高度。	数字	无
$weight 它定义了图标中各个条的权重。	数字	无
$bars 它定义了图标中的条数。	数字	无

背景三角形

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

@include background-triangle($color);

它使用表中指定的参数-

参数和说明	输入	默认值
$color 它定义三角形的颜色。	颜色	$black

清除修复

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

@include clearfix;

自动宽度

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

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

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

禁用鼠标大纲

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

@include disable-mouse-outline;

元素不可见

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

@include element-invisible;

ELEMENT-INVISIBLE-OFF

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

@include element-invisible-off;

垂直居中

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

@include vertical-center;

水平中心

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

@include horizontal-center;

绝对中心

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

@include absolute-center;

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

昵称：邮箱：