基础 - Sass功能(Sass Functions)
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 它检查颜色的亮度。 | Color | None |
2 | $yes 如果颜色很浅,则返回$yes颜色。 | Color | $black |
3 | $no 如果颜色较暗,则返回$no color。 | Color | $white |
4 | $threshold 它代表了轻盈的门槛。 | Percentage | 60% |
smart-scale
它根据其亮度为元素提供合适的颜色。 它使用以下格式指定适当的颜色 -
smart-scale($color, $scale, $threshold)
以上给出的参数在下表中规定 -
Sr.No. | 参数和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $color 它用于缩放颜色。 | Color | None |
2 | $scale 它指定向上或向下扩展的百分比。 | Percentage | 5% |
3 | $threshold 它代表了轻盈的门槛。 | Percentage | 40% |
text-inputs
它在使用文本输入类型时创建选择器。 它使用以下格式指定输入类型 -
text-inputs($types)
它使用下表中指定的参数 -
Sr.No. | 参数和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $types 它提供了许多用于生成选择器的文本输入类型。 | Color | - |
strip-unit
它从值中删除单位并仅返回数字。 它使用以下格式从值中删除单位 -
strip-unit($num)
它使用下表中指定的参数 -
Sr.No. | 参数和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $num 它指定从值中删除单位时的数字。 | Color | None |
rem-calc
它会更改像素值以匹配rem值。 它使用以下格式将像素值转换为rem值 -
rem-calc($values, $base)
它使用表中指定的以下参数 -
Sr.No. | 参数和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $values 它将像素值转换为rem值,并使用空格分隔它们。 如果要转换逗号分隔列表,请将列表括在括号中。 | Number or List | None |
2 | $base 它在将像素转换为rem值时提供基值。 如果base的值为null,则函数使用$base-font-size变量作为基数。 | Number | null |
has-value
它指定值,如果它不是false。 false值包括null,none,0或空列表。 它使用以下格式指定值 -
has-value($val)
它使用下表中指定的参数 -
Sr.No. | 参数和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $val 它检查指定的值。 | Mixed | None |
get-side
它指定值的一侧,并在填充,边距等上定义顶部/右侧/底部/左侧值。它使用以下格式指定值的边 -
has-value($val)
它使用表中指定的以下参数 -
Sr.No. | 参数和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $val 它指定值的一侧。 | List or Number | None |
2 | $side 它确定(顶部/右侧/底部/左侧)值应返回的哪一侧。 | Keyword | None |
get-border-value
它确定元素的边界值。 它使用以下格式指定边框值 -
get-border-value($val, $elem)
它使用表中指定的以下参数 -
Sr.No. | 参数和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $val 它找到边界的特定值。 | List | None |
2 | $elem 它用于提取边框组件。 | Keyword | None |