📌  相关文章
📜  Foundation-Sass函数

📅  最后修改于: 2020-10-25 06:02:00             🧑  作者: Mango

 

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)

下表中指定了以上参数-

Sr.No. Parameter & Description Type Default Value
1 $color

It checks the lightness of the color.

 Color None
2 $yes

If the color is light, then it returns $yes color.

 Color $black
3 $no

If the color is dark, then it returns $no color.

 Color $white
4 $threshold

It represents the threshold of the lightness.

 Percentage 60%

智能规模

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

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

上面指定的参数在下表中指定-

Sr.No. Parameter & Description Type Default Value
1 $color

It is used to scale the color.

 Color None
2 $scale

It specifies the percentage to scale up or down.

 Percentage 5%
3 $threshold

It represents the threshold of the lightness.

 Percentage 40%

文字输入

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

text-inputs($types)

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

Sr.No. Parameter & Description Type Default Value
1 $types

It provides a number of text input types for generating a selector.

 Color –

条带单元

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

strip-unit($num)

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

Sr.No. Parameter & Description Type Default Value
1 $num

It specifies the number when you remove the unit from the value.

 Color None

雷姆计算

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

rem-calc($values, $base)

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

Sr.No. Parameter & Description Type Default Value
1 $values

It converts the pixel values to rem values and separate them using spaces. If you are converting comma separated list, then wrap list in parentheses.

 Number or List None
2 $base

It provides the base value while converting pixel to rem value. If there is null value for the base, then function uses the $base-font-size variable as the base.

 Number null

有价值

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

has-value($val)

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

Sr.No. Parameter & Description Type Default Value
1 $val

It checks the specified value.

 Mixed None

站在一边

它指定值的一面，并定义填充，边距等的上/右/下/左值。它使用以下格式来指定值的一面-

has-value($val)

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

Sr.No. Parameter & Description Type Default Value
1 $val

It specifies the side of a value.

 List or Number None
2 $side

It determines on which side the (top/right/bottom/left) value should return.

 Keyword None

获取边界值

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

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

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

Sr.No. Parameter & Description Type Default Value
1 $val

It finds a specific value of the border.

 List None
2 $elem

It is used to extract the border component.

 Keyword None