Foundation教程

Foundation Sass 函数

Foundation 提供了一组 SASS 实用函数,可以和 utilcolorselectorunit一起使用i>、 价值等等。
您可以使用以下代码行一次导入所有实用程序文件-
@import 'util/util';
您还可以导入单个实用程序文件,如下所示-
@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Sass 参考

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

前景

它根据背景颜色为元素提供前景色。它使用以下格式来分配不同类型的参数-
foreground($color, $yes, $no, $threshold)
以上参数在下表中指定-
参数和说明 输入 默认值
$color
它检查颜色的亮度。
颜色
$yes
如果颜色为浅色,则返回 $yes颜色。
颜色 $black
$no
如果颜色较深,则返回 $no颜色。
颜色 $white
$threshold
表示亮度的阈值。
百分比 60%

智能规模

它根据元素的亮度为元素提供适当的颜色。它使用以下格式来指定适当的颜色-
smart-scale($color, $scale, $threshold)
以上给出的参数在下表中指定-
参数和说明 输入 默认值
$color
用于缩放颜色。
颜色
$scale
它指定放大或缩小的百分比。
百分比 5%
$threshold
表示亮度的阈值。
百分比 40%

文本输入

它在使用文本输入类型时创建了一个选择器。它使用以下格式来指定输入类型-
text-inputs($types)
它使用下表中指定的参数-
参数和说明 输入 默认值
$types
它提供了许多用于生成选择器的文本输入类型。
颜色 -

条带单元

它从值中删除单位并只返回数字。它使用以下格式从值中删除单位-
strip-unit($num)
它使用下表中指定的参数-
参数和说明 输入 默认值
$num
它指定从值中删除单位时的数字。
颜色

rem-calc

它改变像素值以匹配 rem 值。它使用以下格式将像素值转换为 rem 值-
rem-calc($values, $base)
它使用表中指定的以下参数-
参数和说明 输入 默认值
$values
它将像素值转换为 rem 值并使用空格分隔它们。如果要转换逗号分隔列表,请将列表括在括号中。
数字或列表
$base
它在将像素转换为rem值时提供基值。如果基数为空值,则函数使用 $base-font-size 变量作为基数。
数字 null

有值

如果不为假则指定该值。 false 值包括 null、none、0 或空列表。它使用以下格式来指定值-
has-value($val)
它使用下表中指定的参数-
参数和说明 输入 默认值
$val
检查指定的值。
混合

获取端

它指定值的边,并在填充、边距等上定义上/右/下/左值。它使用以下格式指定值的边-
has-value($val)
它使用表中指定的以下参数-
参数和说明 输入 默认值
$val
它指定值的一侧。
列表或数字
$side
它决定(上/右/下/左)值应该返回哪一侧。
关键字

获取边界值

它决定了一个元素的边框值。它使用以下格式指定边界值-
get-border-value($val, $elem)
它使用表中指定的以下参数-
参数和说明 输入 默认值
$val
它找到边界的特定值。
列表
$elem
用于提取边框组件。
关键字
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4