Sass Mixin

Mixin 允许我们在框架的各个部分重复使用代码。Foundation 包含用于清除浮动、可见性、图标、形状等的 mixin。

导入

Foundation 的 Sass mixin 都保存在一个文件中：scss/util/_mixins.scss。要在 Sass 中导入它，请使用以下代码行

@import 'util/mixins';

注意：使用 ZURB Stack 和基本模板入门项目时，默认包含这些 mixin。

通用 Mixin

Foundation 包含一些方便的 Sass mixin，可以快速创建样式或扩展和真正自定义现有组件。以下是可用 mixin 的列表

CSS 三角形 mixin
汉堡图标 mixin
背景三角形
清除浮动
自动宽度子元素
禁用鼠标轮廓
元素不可见
元素可见
垂直居中
水平居中
绝对居中

原型工具 Mixin

使用 Foundation 的原型工具 mixin 快速创建布局和 UI 原型。这些 mixin 非常适合将您的草图和模型快速转换为高保真编码原型。了解有关原型工具的更多信息

以下是可用 mixin 的列表

边框框
无边框
带边框
盒子
显示
宽字体
普通字体
粗体
斜体
无序列表样式
有序列表样式
溢出
水平溢出
垂直溢出
定位
顶部固定定位
底部固定定位
旋转
X 轴旋转
Y 轴旋转
Z 轴旋转
边框半径
圆角边框
分隔符
阴影
最大宽度 100%
边距
内边距
文本装饰
文本转换
隐藏文本
文本截断
文本不换行
第 N 个子元素

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$prototype-arrow-directions`	映射	`下上右左`	包含所有 `arrow` 方向的映射
`$prototype-arrow-size`	数字	`0.4375rem`	箭头的宽度，默认为 `0.4375rem`。
`$prototype-arrow-color`	颜色	`$black`	箭头的颜色，默认为 `$black`。
`$prototype-border-box-breakpoints`	布尔值	`$global-prototype-breakpoints`	边框框的响应断点。
`$prototype-border-none-breakpoints`	布尔值	`$global-prototype-breakpoints`	无边框的响应断点。
`$prototype-bordered-breakpoints`	布尔值	`$global-prototype-breakpoints`	带边框工具的响应断点。
`$prototype-border-width`	数字	`rem-calc(1)`	`prototype-border-width` 的默认值
`$prototype-border-type`	字符串	`solid`	`prototype-border-type` 的默认值
`$prototype-border-color`	颜色	`$medium-gray`	`prototype-border-color` 的默认值，默认为 `medium-gray`
`$prototype-display-breakpoints`	布尔值	`$global-prototype-breakpoints`	显示类的响应断点
`$prototype-display`	映射	`inline inline-block block table table-cell`	包含所有 `display` 类的映射
`$prototype-font-breakpoints`	布尔值	`$global-prototype-breakpoints`	字体样式类型的响应断点
`$prototype-wide-letter-spacing`	数字	`rem-calc(4)`	`.font-wide` 的字母间距
`$prototype-font-normal`	数字	`$global-weight-normal`	`.font-normal` 的默认粗细，默认为 `global-weight-normal`
`$prototype-font-bold`	数字	`$global-weight-bold`	`.font-bold` 的默认粗细，默认为 `global-weight-bold`
`$prototype-list-breakpoints`	布尔值	`$global-prototype-breakpoints`	列表样式类型的响应断点
`$prototype-style-type-unordered`	映射	`disc circle square`	包含所有 `style-type-unordered` 类的映射
`$prototype-style-type-ordered`	映射	`decimal lower-alpha lower-latin lower-roman upper-alpha upper-latin upper-roman`	包含所有 `style-type-ordered` 类的映射
`$prototype-overflow-breakpoints`	布尔值	`$global-prototype-breakpoints`	溢出辅助类的响应断点
`$prototype-overflow`	映射	`visible hidden scroll`	包含所有 `overflow` 类的映射
`$prototype-position-breakpoints`	布尔值	`$global-prototype-breakpoints`	定位辅助类的响应断点
`$prototype-position`	映射	`static relative absolute fixed`	包含所有 `position` 类的映射
`$prototype-position-z-index`	数字	`975`	固定定位的 z-index
`$prototype-rounded-breakpoints`	布尔值	`$global-prototype-breakpoints`	圆角工具的响应断点。
`$prototype-border-radius`	数字	`rem-calc(3)`	`prototype-border-radius` 的默认值
`$prototype-separator-breakpoints`	布尔值	`$global-prototype-breakpoints`	分隔符的响应断点。
`$prototype-separator-align`	字符串	`center`	分隔符的默认对齐方式。
`$prototype-separator-height`	数字	`rem-calc(2)`	分隔符的高度。
`$prototype-separator-width`	数字	`3rem`	分隔符的宽度。
`$prototype-separator-background`	颜色	`$primary-color`	分隔符的默认颜色。
`$prototype-separator-margin-top`	数字	`$global-margin`	分隔符的上边距。
`$prototype-shadow-breakpoints`	布尔值	`$global-prototype-breakpoints`	阴影工具的响应断点。
`$prototype-box-shadow`	数字	`0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)`	`prototype-box-shadow` 的默认值
`$prototype-sizing-breakpoints`	布尔值	`$global-prototype-breakpoints`	间距类（边距和内边距）的响应断点
`$prototype-sizing`	映射	`width height`	包含所有 `sizing` 类的映射
`$prototype-sizes`	映射	`25: 25% 50: 50% 75: 75% 100: 100%`	包含所有尺寸的映射。
`$prototype-spacing-breakpoints`	布尔值	`$global-prototype-breakpoints`	间距类（边距和内边距）的响应断点
`$prototype-spacers-count`	数字	`3`	默认间距数量（边距和内边距）
`$prototype-decoration-breakpoints`	布尔值	`$global-prototype-breakpoints`	文本装饰类的响应断点
`$prototype-text-decoration`	映射	`overline underline line-through`	包含所有 `text-decoration` 类的映射
`$prototype-transformation-breakpoints`	布尔值	`$global-prototype-breakpoints`	文本转换类的响应断点
`$prototype-text-transformation`	映射	`lowercase uppercase capitalize`	包含所有 `text-transformation` 类的映射
`$prototype-utilities-breakpoints`	布尔值	`$global-prototype-breakpoints`	文本工具的响应断点
`$prototype-text-overflow`	字符串	`ellipsis`	`text-overflow` 变量的默认值

Mixin

我们使用这些 mixin 来构建此组件的最终 CSS 输出。您可以自己使用这些 mixin 来构建我们组件的自定义类结构。

inner-side-shadow

@include inner-side-shadow($side, $size, $color);

仅为一侧创建内部阴影

参数	类型	默认值	描述
`$side`	关键字	`无`	阴影应该出现的一侧。可以是 `top`、`left`、`right` 或 `bottom`。
`$size`	数字	`无`	目标侧的宽度。
`$color`	颜色	`无`	阴影的颜色。

css-triangle

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

创建一个 CSS 三角形，可用于下拉箭头、下拉点等等。在 &::before 或 &::after 选择器中使用此 mixin，将三角形附加到现有元素。

参数	类型	默认值	描述
`$triangle-size`	数字	`无`	三角形的宽度。
`$triangle-color`	颜色	`无`	三角形的颜色。
`$triangle-direction`	关键字	`无`	三角形指向的方向。可以是 `up`、`right`、`down` 或 `left`。

hamburger

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

创建一个具有设定宽度、高度、条数和颜色的菜单图标。mixin 使用图标的高度和条的粗细来确定间距。

参数	类型	默认值	描述
`$color`	颜色	`$black`	用于图标的颜色。
`$color-hover`	颜色	`$dark-gray`	鼠标悬停在图标上时使用的颜色。
`$width`	数字	`20px`	图标的宽度。
`$height`	数字	`16px`	图标的高度。
`$weight`	数字	`2px`	图标中各个条的高度。
`$bars`	数字	`3`	图标中的条数。

background-triangle

@include background-triangle($color);

将一个向下三角形作为背景图像添加到元素中。图像格式为 SVG，可以轻松更改颜色。由于 Internet Explorer 不支持将编码的 SVG 作为背景图像，因此还包含 PNG 回退。PNG 回退有两种：黑色三角形和白色三角形。使用哪一个取决于输入颜色的亮度。

参数	类型	默认值	描述
`$color`	颜色	`$black`	用于三角形的颜色。

clearfix

@include clearfix;

应用由 Nicolas Gallagher 推广的微 clearfix hack。如果容器的子元素都是浮动的，则在容器上包含此 mixin，以使容器具有适当的高度。clearfix 通过特定样式进行了增强，以防止在 flexbox 环境中出现边框

了解更多信息： Micro Clearfix Hack

自动宽度

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

添加用于“数量查询”选择器的 CSS，该选择器根据容器内的元素数量自动调整元素大小。

了解更多信息： CSS 数量查询

参数	类型	默认值	描述
`$max`	数字	`无`	要检测的最大项目数。此数字越大，覆盖每个项目数所需的 CSS 就越多。
`$elem`	关键字	`li`	用于兄弟选择器的标签。

禁用鼠标轮廓

@include disable-mouse-outline;

检测到鼠标输入时，删除元素周围的焦点环。

元素不可见

@include element-invisible($enforce);

使元素在视觉上隐藏，但键盘和辅助设备仍然可以访问。

了解更多信息： 隐藏内容以实现可访问性

参数	类型	默认值	描述
`$enforce`	布尔值	`无`	如果为 `true`，则对应用的属性使用 `!important`

元素可见

@include element-invisible-off($enforce);

反转 element-invisible() mixin 创建的 CSS 输出。

参数	类型	默认值	描述
`$enforce`	布尔值	`无`	如果为 `true`，则对应用的属性使用 `!important`

垂直居中

@include vertical-center;

在元素的第一个非静态父元素内垂直居中元素。

了解更多信息： 使用 Sass 居中

水平居中

@include horizontal-center;

在元素的第一个非静态父元素内水平居中元素。

了解更多信息： 使用 Sass 居中

绝对居中

@include absolute-center;

在元素的第一个非静态父元素内绝对居中元素。

了解更多信息： 使用 Sass 居中

边框盒

@include border-box;

边框盒实用程序

无边框

@include border-none;

无边框实用程序

带边框

@include bordered($width, $type, $color);

带边框实用程序：默认情况下，为元素添加浅色边框。

参数	类型	默认值	描述
`$width`	数字	`$prototype-border-width`	边框宽度
`$type`	字符串	`$prototype-border-type`	边框类型
`$color`	颜色	`$prototype-border-color`	边框颜色

盒

@include box($width, $height, $circle);

盒 Mixin：轻松创建正方形、矩形或圆形

参数	类型	默认值	描述
`$width`	数字	`无`	盒的宽度
`$height`	数字	`$width`	盒的高度，默认为 `$width` 以便于制作正方形
`$circle`	布尔值	`false`	默认情况下，将框设为圆形，`false`。

显示

@include display($display);

显示类，默认情况下通过映射 $prototype-display 传递

参数	类型	默认值	描述
`$display`	字符串	`无`	显示类

字体加宽

@include font-wide($letter-spacing);

字体加宽字母间距！

参数	类型	默认值	描述
`$letter-spacing`	数字	`$prototype-wide-letter-spacing`	字体的加宽字母间距

正常字体

@include font-normal($weight);

字体粗细正常，默认值通过 global-weight-normal 传递

参数	类型	默认值	描述
`$weight`	数字	`$prototype-font-normal`	字体粗细（正常）

粗体

@include font-bold($weight);

字体粗体，默认值通过 global-weight-bold 传递

参数	类型	默认值	描述
`$weight`	数字	`$prototype-font-bold`	字体粗细（粗体）

斜体

@include font-italic;

字体样式斜体

无序列表样式

@include style-type-unordered($style-type-unordered);

无序列表的样式类型，默认情况下通过映射 $prototype-style-type-unordered 传递

参数	类型	默认值	描述
`$style-type-unordered`	字符串	`无`	无序列表的样式类型

有序列表样式

@include style-type-ordered($style-type-ordered);

有序列表的样式类型，默认情况下通过映射 $prototype-style-type-ordered 传递

参数	类型	默认值	描述
`$style-type-ordered`	字符串	`无`	有序列表的样式类型

溢出

@include overflow($overflow);

溢出类，默认情况下通过映射 $prototype-overflow 传递

参数	类型	默认值	描述
`$overflow`	字符串	`无`	溢出类

水平溢出

@include overflow-x($overflow);

水平轴上的溢出类，默认情况下通过映射 $prototype-overflow 传递

参数	类型	默认值	描述
`$overflow`	字符串	`无`	溢出类（水平轴）

垂直溢出

@include overflow-y($overflow);

垂直轴上的溢出类，默认情况下通过映射 $prototype-overflow 传递

参数	类型	默认值	描述
`$overflow`	字符串	`无`	溢出类（垂直轴）

定位

@include position($position, $top, $right, $bottom, $left);

定位类，默认情况下通过映射 $prototype-position 传递，而所有偏移值都乘以 $global-position，默认情况下等于 1rem。

参数	类型	默认值	描述
`$position`	字符串	`无`	定位类，`static`、`relative`、`absolute` 或 `fixed`
`$top`	数字	`null`	顶部偏移
`$right`	数字	`null`	右侧偏移
`$bottom`	数字	`null`	底部偏移
`$left`	数字	`null`	左侧偏移

顶部固定定位

@include position-fixed-top($z-index);

在顶部角落固定定位

参数	类型	默认值	描述
`$z-index`	数字	`$prototype-position-z-index`	`position-fixed-top` 的 z-index

底部固定定位

@include position-fixed-bottom($z-index);

在底部角落固定定位

参数	类型	默认值	描述
`$z-index`	数字	`$prototype-position-z-index`	`position-fixed-bottom` 的 z-index

旋转

@include rotate($deg);

旋转 Mixin：将元素旋转到某个角度

参数	类型	默认值	描述
`$deg`	数字	`无`	旋转度数

X 轴旋转

@include rotateX($deg);

RotateX Mixin：沿 X 轴将元素旋转到某个角度

参数	类型	默认值	描述
`$deg`	数字	`无`	旋转度数

Y 轴旋转

@include rotateY($deg);

RotateY Mixin：沿 Y 轴将元素旋转到某个角度

参数	类型	默认值	描述
`$deg`	数字	`无`	旋转度数

Z 轴旋转

@include rotateZ($deg);

RotateZ Mixin：沿 Z 轴将元素旋转到某个角度

参数	类型	默认值	描述
`$deg`	数字	`无`	旋转度数

边框半径

@include border-radius($radius);

圆角实用程序（所有角）：默认情况下，为元素添加圆角（所有角）。

参数	类型	默认值	描述
`$radius`	数字	`$prototype-border-radius`	边框半径（所有角）

圆角边框

@include border-rounded;

圆角正方形实用程序或圆角矩形实用程序（所有角）：默认情况下，将元素的所有角都设置为圆角以形成药丸形状。

分隔符

@include separator($align, $height, $width, $background, $top);

标题分隔符实用程序，主要用于设置节标题的样式

参数	类型	默认值	描述
`$align`	字符串	`$prototype-separator-align`	分隔符对齐
`$height`	数字	`$prototype-separator-height`	宽度
`$width`	数字	`$prototype-separator-width`	高度
`$background`	颜色	`$prototype-separator-background`	背景
`$top`	数字	`$prototype-separator-margin-top`	上边距

阴影

@include shadow($shadow);

阴影实用程序：默认情况下，为元素添加浅色阴影。

参数	类型	默认值	描述
`$shadow`	数字	`$prototype-box-shadow`	组件的阴影

最大宽度 100

@include max-width-100;

最大宽度 100 实用程序。

最大高度 100

@include max-height-100;

最大高度 100 实用程序。

边距

@include margin($top, $right, $bottom, $left);

边距助手 mixin，所有值都乘以 $global-margin，默认情况下等于 1rem

参数	类型	默认值	描述
`$top`	数字	`null`	上边距
`$right`	数字	`null`	右边距
`$bottom`	数字	`null`	下边距
`$left`	数字	`null`	左边距

填充

@include padding($top, $right, $bottom, $left);

填充助手 mixin，所有值都乘以 $global-padding，默认情况下等于 1rem

参数	类型	默认值	描述
`$top`	数字	`null`	上边距
`$right`	数字	`null`	右边距
`$bottom`	数字	`null`	下边距
`$left`	数字	`null`	左边距

方向边距

@include margin-direction($dir, $spacer);

特定方向属性的边距类

参数	类型	默认值	描述
`$dir`	字符串	`无`	方向
`$spacer`	数字	`无`	间隔

方向填充

@include padding-direction($dir, $spacer);

特定方向属性的填充类

参数	类型	默认值	描述
`$dir`	字符串	`无`	方向
`$spacer`	数字	`无`	间隔

文本装饰

@include text-decoration($decoration);

文本装饰，默认情况下通过映射 $prototype-text-decoration 传递

参数	类型	默认值	描述
`$decoration`	字符串	`无`	文本装饰

文本转换

@include text-transform($transformation);

文本转换，默认情况下通过映射 $prototype-text-transformation 传递

参数	类型	默认值	描述
`$transformation`	字符串	`无`	文本转换

隐藏文本

@include text-hide;

图像替换实用程序。text-hide

截断文本

@include text-truncate($overflow);

截断文本，默认情况下为省略号。

参数	类型	默认值	描述
`$overflow`	字符串	`$prototype-text-overflow`	文本截断

文本不换行

@include text-nowrap;

文本不换行。text-nowrap

文本换行

@include text-wrap;

文本换行。text-wrap

第一个

@include first($num) { }

从第一个到 $num 选择所有子元素。

参数	类型	默认值	描述
`$num`	数字	`无`	子元素总数的前 `n` 个

第一个子元素

@include first-child { }

选择第一个确切的子元素

最后一个

@include last($num) { }

从最后一个到 $num 选择所有子元素。

参数	类型	默认值	描述
`$num`	数字	`无`	子元素总数的后 `n` 个

最后一个子元素

@include last-child { }

选择最后一个确切的子元素

每个

@include every($num) { }

每隔 $num 个子元素选择一次。

参数	类型	默认值	描述
`$num`	数字	`无`	所有子元素中的每 `n` 个

第一个和最后一个

@include first-last { }

仅选择第一个和最后一个子元素。

第一个之后

@include after-first($num) { }

从第一个到 $num 选择所有子元素。

参数	类型	默认值	描述
`$num`	数字	`无`	子元素总数的前 `n` 个之后

从最后一个开始

@include from-last($num) { }

从最后一个开始选择 $num 之前的子元素。

参数	类型	默认值	描述
`$num`	数字	`无`	从子元素总数的后 `n` 个开始

从第一个和最后一个开始

@include from-first-last($num) { }

从第一个开始选择第 $num 个子元素，从最后一个开始选择第 $num 个子元素。

参数	类型	默认值	描述
`$num`	数字	`无`	从第一个和最后一个开始调用的第 `n` 个

除...之外的所有

@include all-but($num) { }

选择除 $num 之外的所有子元素。

参数	类型	默认值	描述
`$num`	数字	`无`	应该从所有其他子元素中排除的第 `n` 个

除第一个和最后一个之外的所有

@include all-but-first-last($num) { }

选择第一个 $num 和最后一个 $num 之间的所有子元素。

参数	类型	默认值	描述
`$num`	数字	`无`	从所有其他子元素中排除的第一个和最后一个的第 `n` 个

唯一

@include unique { }

仅当子元素唯一时才选择它。这意味着，如果至少有 2 个子元素，则不会应用该样式。

非唯一

@include not-unique { }

仅当子元素不唯一时才选择它们。这意味着，如果至少有 2 个子元素，则将应用该样式。

之间

@include between($first, $last) { }

选择 $first 和 $last 之间的所有子元素。

参数	类型	默认值	描述
`$first`	数字	`无`	第一个第 `n` 个
`$last`	数字	`无`	最后一个第 `n` 个

偶数

@include even { }

选择所有偶数子元素。

偶数之间

@include even-between($first, $last) { }

选择 $first 和 $last 之间的所有偶数子元素。

参数	类型	默认值	描述
`$first`	数字	`无`	第一个第 `n` 个
`$last`	数字	`无`	最后一个第 `n` 个

奇数

@include odd { }

选择所有奇数子元素。

奇数之间

@include odd-between($first, $last) { }

选择 $first 和 $last 之间的所有奇数子元素。

参数	类型	默认值	描述
`$first`	数字	`无`	第一个第 `n` 个
`$last`	数字	`无`	最后一个第 `n` 个

数字之间

@include number-between($num, $first, $last) { }

选择 $first 和 $last 之间的所有 $num 个子元素。

参数	类型	默认值	描述
`$num`	数字	`无`	`$first` 和 `$last` 之间的每 `n` 个
`$first`	数字	`无`	第一个第 `n` 个
`$last`	数字	`无`	最后一个第 `n` 个