Foundation - Sass 函数

Foundation 提供了一组 SASS 实用函数,可与 utilcolorselectorunitvalue 等一起使用。

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

@import 'util/util';

您还可以导入单个实用程序文件,如下所示 −

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

Sass 参考

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

foreground

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

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

上述参数在下表中指定 −

Sr.No. 参数 &描述 类型 默认值
1

$color

检查颜色的亮度。

颜色 None
2

$yes

如果颜色很浅,则返回 $yes 颜色。

颜色 $black
3

$no

如果颜色较暗,则返回 $no 颜色。

颜色 $white
4

$threshold

表示亮度的阈值。

百分比 60%

smart-scale

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

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

以上给出的参数在下表中指定 −

Sr.No. 参数 &描述 类型 默认值
1

$color

用于缩放颜色。

颜色 None
2

$scale

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

百分比 5%
3

$threshold

表示亮度的阈值。

百分比 40%

text-inputs

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

text-inputs($types)

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

Sr.No. 参数 &描述 类型 默认值
1

$types

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

颜色 -

strip-unit

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

strip-unit($num)

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

Sr.No. 参数 &描述 类型 默认值
1

$num

它指定从值中删除单位时的数字。

颜色 None

rem-calc

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

rem-calc($values, $base)

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

Sr.No. 参数和说明 类型 默认值
1

$values

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

数字或列表 None
2

$base

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

Number null

has-value

如果不为假,则指定值。假值包括 null、none、0 或空列表。它使用以下格式来指定值 −

has-value($val)

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

Sr.No. 参数 &描述 类型 默认值
1

$val

检查指定的值。

混合 None

get-side

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

has-value($val)

使用表中指定的以下参数 −

序号 参数 &描述 类型 默认值
1

$val

它指定值的一侧。

列表或数字 None
2

$side

它确定值应返回哪一侧(顶部/右侧/底部/左侧)。

关键字 None

get-border-value

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

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

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

Sr.No. 参数 &描述 类型 默认值
1

$val

查找边框的特定值。

列表 None
2

$elem

用于提取边框组件。

关键字 None