基础 - Sass功能(Sass Functions)

优质
小牛编辑
123浏览
2023-12-01

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

它检查颜色的亮度。

ColorNone
2

$yes

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

Color$black
3

$no

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

Color$white
4

$threshold

它代表了轻盈的门槛。

Percentage60%

smart-scale

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

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

以上给出的参数在下表中规定 -

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

$color

它用于缩放颜色。

ColorNone
2

$scale

它指定向上或向下扩展的百分比。

Percentage5%
3

$threshold

它代表了轻盈的门槛。

Percentage40%

text-inputs

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

text-inputs($types)

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

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

$types

它提供了许多用于生成选择器的文本输入类型。

Color-

strip-unit

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

strip-unit($num)

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

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

$num

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

ColorNone

rem-calc

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

rem-calc($values, $base)

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

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

$values

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

Number or ListNone
2

$base

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

Numbernull

has-value

它指定值,如果它不是false。 false值包括null,none,0或空列表。 它使用以下格式指定值 -

has-value($val)

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

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

$val

它检查指定的值。

MixedNone

get-side

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

has-value($val)

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

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

$val

它指定值的一侧。

List or NumberNone
2

$side

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

KeywordNone

get-border-value

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

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

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

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

$val

它找到边界的特定值。

ListNone
2

$elem

它用于提取边框组件。

KeywordNone