Sass 函数

在幕后，Foundation 由一组实用 Sass 函数提供支持，这些函数可帮助我们处理颜色、单位、选择器等。

导入

所有 Foundation 的 Sass 工具都位于 scss/util 文件夹中，并按类别分解为多个文件。您可以使用以下代码行一次导入所有实用程序文件

@import 'util/util';

或者，可以单独导入实用程序。

// Color manipulation
@import 'util/color';

// Selector generation
@import 'util/selector';

// Unit manipulation and conversion
@import 'util/unit';

// Value checking and extraction
@import 'util/value';

以 -zf- 为前缀的变量、函数或混合宏被视为内部 API 的一部分，这意味着它们可能会在没有任何警告的情况下发生更改、中断或消失。我们建议您仅使用下面记录的公共 API。

Sass 参考

变量

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

名称	类型	默认值	描述
`$primary-color`		`null`	修复问题 #12080 的补丁

混合宏

我们使用这些混合宏来构建此组件的最终 CSS 输出。您可以自己使用混合宏从我们的组件中构建自己的类结构。

add-foundation-colors

@include add-foundation-colors;

将 $foundation-palette 映射中的颜色转换为变量，例如 $primary-color 和 $secondary-color。在设置文件的全局部分下方调用此混合宏以正确迁移您的代码库。

flex

@include flex;

通过向元素添加 display: flex 来启用 flexbox。

flex-align

@include flex-align($x, $y);

水平或垂直对齐 flex 容器内的项目。

参数	类型	默认值	描述
`$x`	关键字	`null`	要使用的水平对齐方式。可以是 `left`、`right`、`center`、`justify` 或 `spaced`。或者，将其设置为 `null`（默认值）以不设置水平对齐方式。
`$y`	关键字	`null`	要使用的垂直对齐方式。可以是 `top`、`bottom`、`middle` 或 `stretch`。或者，将其设置为 `null`（默认值）以不设置垂直对齐方式。

flex-align-self

@include flex-align-self($y);

在 flex 行中垂直对齐单个列。将此混合宏应用于 flex 列。

参数	类型	默认值	描述
`$y`	关键字	`null`	要使用的垂直对齐方式。可以是 `top`、`bottom`、`middle` 或 `stretch`。或者，将其设置为 `null`（默认值）以不设置垂直对齐方式。

flex-order

@include flex-order($order);

更改 flex 子级的源顺序。编号较低的子级首先出现在布局中。

参数	类型	默认值	描述
`$order`	数字	`0`	要应用的订单号。

flex-direction

@include flex-direction($direction);

更改 flex-direction

参数类型默认值描述

参数	类型	默认值	描述
`$direction`	关键字	`row`	要使用的 Flex 方向。可以是 row（默认）：与文本方向相同 row-reverse：与文本方向相反 column：与 row 相同，但从上到下 column-reverse：与 row-reverse 相同，但从上到下

$direction

关键字

row

要使用的 Flex 方向。可以是

row（默认）：与文本方向相同
row-reverse：与文本方向相反
column：与 row 相同，但从上到下
column-reverse：与 row-reverse 相同，但从上到下

函数

color-luminance

color-luminance($color)

检查 $color 的亮度。

参数	类型	默认值	描述
`$color`	颜色	`无`	要检查其亮度的颜色。

color-contrast

color-contrast($color1, $color2)

检查两种颜色的对比度。

参数	类型	默认值	描述
`$color1`	颜色	`无`	要比较的第一种颜色。
`$color2`	颜色	`无`	要比较的第二种颜色。

color-pick-contrast

color-pick-contrast($base, $colors, $tolerance)

检查 $base 的亮度，并从 $colors（颜色列表）返回对比度最大的颜色。

参数	类型	默认值	描述
`$base`	颜色	`无`	要检查亮度的颜色。
`$colors`	列表	`$white $black`	要比较的颜色。
`$tolerance`	数字	`$global-color-pick-contrast-tolerance`	对比度容差。

smart-scale

smart-scale($color, $scale, $threshold)

如果颜色较浅，则将其缩放为较暗的颜色；如果颜色较暗，则将其缩放为较浅的颜色。使用此函数可以根据颜色的亮度对其进行适当的着色。

参数	类型	默认值	描述
`$color`	颜色	`无`	要缩放的颜色。
`$scale`	百分比	`5%`	向上或向下缩放的量。
`$threshold`	百分比	`40%`	要检查的亮度阈值。

get-color

get-color($color)

从 foundation-palette 获取颜色

参数	类型	默认值	描述
`$color`	key	`无`	foundation-palette 中的键

direction-opposite

direction-opposite($dir)

返回 $dir 的相反方向

参数	类型	默认值	描述
`$dir`	关键字	`无`	使用的方向，可以是 "top"、"right"、"bottom" 和 "left" 之一。

gcd

gcd($a, $b)

查找两个整数的最大公约数。

参数	类型	默认值	描述
`$a`	数字	`无`	要比较的第一个数字。
`$b`	数字	`无`	要比较的第二个数字。

pow

pow($base, $exponent)

通过尝试将小数指数转换为分数，然后对计算的各个部分使用 nth-root-algorithm 来处理小数指数

参数	类型	默认值	描述
`$base`	数字	`无`	基数。
`$exponent`	数字	`无`	指数。

ratio-to-percentage

ratio-to-percentage($ratio)

针对给定比率计算高度占宽度的百分比。

参数	类型	默认值	描述
`$ratio`	列表	`无`	用于计算高度的比率，格式为 `x by y`。

zf-parse-fraction

zf-parse-fraction($fraction)

将给定的 $fraction 解析为分子和分母。

参数	类型	默认值	描述
`$fraction`	*	`无`	表示要解析的分数的值。其格式可以是 `50%`、`1 of 2`、`1/2` 或 `50`（不返回分母）。

zf-is-fraction

zf-is-fraction($value, $allow-no-denominator)

返回给定的 $value 是否表示分数。支持 50%、1 of 2、1 per 2 或 1/2 等格式。

参数	类型	默认值	描述
`$value`	*	`无`	要测试的值。
`$allow-no-denominator`	布尔值	`false`	如果为 `true`，则支持没有分母的简单数字（如 `50`）。

fraction-to-percentage

fraction-to-percentage($fraction, $denominator)

根据给定的分数计算百分比。

参数	类型	默认值	描述
`$fraction`	数字或列表	`无`	表示用于计算百分比的分数的值，格式为 `50`（相对于 `$denominator`）、`50%`、`1 of 2` 或 `1/2`。
`$denominator`	数字或列表	`无`	当 `$fraction` 表示绝对值时用作分母的默认值。

divide

divide($divident, $divisor, $precision)

将给定的 $divident 除以给定的 $divisor。

参数	类型	默认值	描述
`$divident`	数字	`无`	被除数。
`$divisor`	数字	`无`	除数。
`$precision`	数字	`无`	除法的精度小数位数。

text-inputs

text-inputs($types, $modifier)

生成一个包含所有文本输入类型的选择器。您还可以过滤列表以仅输出这些选择器的子集。

参数	类型	默认值	描述
`$types`	列表或关键字		要使用的文本输入类型列表。留空以使用所有类型。
`$modifier`	关键字	`''`	要应用于每个文本输入类型的修饰符（例如类或伪类）。留空以忽略。

font-stack

font-stack($stack, $map)

从映射返回字体堆栈列表。等效于 map-safe-get($name, $-zf-font-stack)。

参数	类型	默认值	描述
`$stack`	字符串	`无`	字体堆栈的名称。
`$map`	映射	`$-zf-font-stack`	要从中检索列表的字体堆栈映射。

strip-unit

strip-unit($num)

从值中删除单位（例如 px、em、rem），仅返回数字。

参数	类型	默认值	描述
`$num`	数字	`无`	要删除单位的数字。

rem-calc

rem-calc($values, $base)

将一个或多个像素值转换为匹配的 rem 值。

参数	类型	默认值	描述
`$values`	数字或列表	`无`	要转换的一个或多个值。请确保使用空格而不是逗号分隔它们。如果需要转换逗号分隔的列表，请将列表括在括号中。
`$base`	数字	`null`	计算 `rem` 时使用的基值。如果您直接使用 Foundation，则此值为 16px。如果此参数为 `null`，则该函数将引用 `$global-font-size` 变量作为基准。

unitless-calc

unitless-calc($value, $base)

根据给定的字体大小，将像素、百分比、rem 或 em 值转换为无单位值。非常适合计算无单位的行高。

参数	类型	默认值	描述
`$value`	数字	`无`	要转换为无单位行高的值
`$base`	数字	`无`	用于计算行高的字体大小 - 默认为 $global-font-size

has-value

has-value($val)

根据 CSS 术语确定值是否不为假值。假值为 null、none、带有任何单位的 0 或空列表。

参数	类型	默认值	描述
`$val`	混合	`无`	要检查的值。

get-side

get-side($val, $side)

确定 padding、margin 等属性的顶部/右侧/底部/右侧值，无论传入了多少个值。如果您需要知道值的特定边，但不知道该值是否使用简写格式，请使用此函数。

参数	类型	默认值	描述
`$val`	列表或数字	`无`	要分析的值。应为简写大小属性，例如 "1em 2em 1em"
`$side`	关键字	`无`	要返回的边。应该是 `top`、`right`、`bottom` 或 `left`。

get-border-value

get-border-value($val, $elem)

给定边框 $val，找到边框的特定元素，即 $elem。$elem 的可能值为 width、style 和 color。

参数	类型	默认值	描述
`$val`	列表	`无`	要在其中查找值的边框值。
`$elem`	关键字	`无`	要提取的边框组件。

map-deep-get

map-deep-get($map, $keys...)

在嵌套映射中查找值。

了解更多信息： 映射中的深度获取/设置

参数	类型	默认值	描述
`$map`	映射	`无`	要从中提取值的映射。
`$keys...`	字符串	`无`	查找值时使用的键。

map-to-list

map-to-list($map)

将映射转换为列表。

了解更多信息：

参数	类型	默认值	描述
`$map`	映射	`无`	要从中提取值的映射。

zf-str-join

zf-str-join($str1, $str1, $delimiter)

返回两个给定字符串 $str1 和 $str2 的连接。如果两个字符串都不为空，则它们之间用 $delimiter 分隔。

参数	类型	默认值	描述
`$str1`	字符串	`null`	要连接的第一个字符串。
`$str1`	字符串	`null`	要连接的第二个字符串。
`$delimiter`	字符串	`null`	`$str1` 和 `$str2` 之间的分隔符。

map-safe-get

map-safe-get($map, $key)

安全地从映射中返回值。

参数	类型	默认值	描述
`$map`	映射	`无`	要从中检索值的映射。
`$key`	字符串	`无`	映射键的名称。