Foundation - Sass 函数
Foundation 提供了一组 SASS 实用函数,可与 util、color、selector、unit、value 等一起使用。
您可以使用以下代码行一次导入所有实用程序文件 −
@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 |