基础 - Sass 函数

Foundation 提供了一组 SASS 实用函数，可与util、color、选择器、unit、value等一起使用。

您可以使用以下代码行一次导入所有实用程序文件 -

@import 'util/util';

您还可以导入单独的实用程序文件，如下所示 -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Sass 参考

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

前景

它根据背景颜色为元素提供前景色。它使用以下格式分配不同类型的参数 -

foreground($color, $yes, $no, $threshold)

上述参数在下表中指定 -

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

$颜色

它检查颜色的亮度。

 颜色 没有任何
2

$是的

如果颜色是浅色，则返回$yes color。

 颜色 $黑色
3

$不

如果颜色是深色的，则返回$no color。

 颜色 $白色
4

$阈值

它代表亮度的阈值。

 百分比 60%

智能秤

它根据元素的亮度为元素提供适当的颜色。它使用以下格式来指定适当的颜色 -

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

上述给定参数在下表中指定 -

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

$颜色

它用于缩放颜色。

 颜色 没有任何
2

$规模

它指定放大或缩小的百分比。

 百分比 5%
3

$阈值

它代表亮度的阈值。

 百分比 40%

文本输入

它在使用文本输入类型时创建一个选择器。它使用以下格式来指定输入类型 -

text-inputs($types)

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

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

$类型

它提供了多种文本输入类型来生成选择器。

 颜色 -

条带单元

它从值中删除单位并仅返回数字。它使用以下格式从值中删除单位 -

strip-unit($num)

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

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

$号

当您从值中删除单位时，它指定数字。

 颜色 没有任何

重新计算

它更改像素值以匹配 rem 值。它使用以下格式将像素值转换为 rem 值 -

rem-calc($values, $base)

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

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

$值

它将像素值转换为 rem 值并使用空格分隔它们。如果要转换逗号分隔的列表，请将列表括在括号中。

 编号或列表 没有任何
2

$基数

它在将像素转换为 rem 值时提供基值。如果基数为空值，则函数使用$base-font-size变量作为基数。

 数字 无效的

有价值

如果不为 false，则指定该值。false 值包括 null、none、0 或空列表。它使用以下格式来指定值 -

has-value($val)

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

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

$val

它检查指定的值。

 混合 没有任何

获得方

它指定值的一侧，并定义填充、边距等的顶部/右侧/底部/左侧值。它使用以下格式来指定值的一侧 -

has-value($val)

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

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

$val

它指定值的一侧。

 列表或数字 没有任何
2

$边

它确定（上/右/下/左）值应返回哪一侧。

 关键词 没有任何

获取边界值

它确定元素的边框值。它使用以下格式来指定边框值 -

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

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

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

$val

它找到边界的特定值。

 列表 没有任何
2

$元素

它用于提取边框组件。

 关键词 没有任何