Foundation提供了一组SASS实用程序函数,可以与 util , color ,选择器,单元一起使用, 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. | 参数&说明 | 输入 | 默认值 |
---|---|---|---|
1 | $color 它会检查颜色的亮度. | 颜色 | 无 |
2 | $ yes 如果颜色很浅,则返回 $ yes 颜色. | 颜色 | $ black |
3 | $ no 如果颜色较暗,则返回 $ no 颜色. | 颜色 | $ white |
4 | $ threshold 它代表亮度的阈值. | 百分比 | 60% |
smart-scale
它根据元素的亮度为元素提供合适的颜色.它使用以下格式指定适当的颜色 :
smart-scale($color, $scale, $threshold)
上面给出的参数在下表中指定 :
Sr.No. | 参数&说明 | 输入 | 默认值 |
---|---|---|---|
1 | $color 它用于缩放颜色. | 颜色 | 无 |
2 | $ scale 它指定了向上或向下扩展的百分比. | 百分比 | 5% |
3 | $ threshold 它代表亮度的阈值. | 百分比 | 40% |
text-inputs
它在使用文本输入类型时创建一个选择器.它使用以下格式指定输入类型 :
text-inputs($ types)
它使用下表中指定的参数 :
Sr.No. | 参数&说明 | 输入 | 默认值 |
---|---|---|---|
1 | $types 它提供了许多用于生成选择器的文本输入类型. | 颜色 | - |
strip-unit
它从值中删除单位并仅返回数字.它使用以下格式从值 : 中删除单位;
strip-unit($ num)
它使用下表中指定的参数 :
Sr.No. | 参数&说明 | 输入 | 默认值 |
---|---|---|---|
1 | $ num 它指定从值中删除单位时的数字. | 颜色 | 无 |
rem-calc
它更改像素值以匹配rem值.它使用以下格式将像素值转换为rem值 :
rem-calc($ values,$ base)
它使用表中指定的以下参数 :
Sr.No. | 参数&说明 | 输入 | 默认值 |
---|---|---|---|
1 | $num 它将像素值转换为rem值并使用空格分隔它们.如果要转换逗号分隔列表,则将括号列表括在括号中. | 数字或列表 | 无 |
2 | $ base 它在将像素转换为rem值时提供基值.如果base的值为null,则函数使用 $ base-font-size 变量作为基数. | 数字 | null |
has-value
如果值不为false,则指定值. false值包括null,none,0或空列表.它使用以下格式指定值 :
has-value($ val)
它使用下表中指定的参数 :
Sr.No. | 参数&说明 | 输入 | 默认值 |
---|---|---|---|
1 | $ val 检查指定值. | 混合 | 无 |
get-side
它指定值的一侧并定义填充,边距等上的上/右/下/左值.它使用以下格式指定值的一边 :
has-value($ val)
它使用表中指定的以下参数 :
Sr.No. | 参数&说明 | 输入 | 默认值 |
---|---|---|---|
1 | $ val 它指定值的一边. | 列表或数字 | 无 |
2 | $ side 它确定(上/右/下/左)值的哪一侧应该返回. | 关键字 | 无 |
get-border-value
它确定元素的边界值.它使用以下格式指定边框值 :
get-border-value($ val,$ elem)
它使用表中指定的以下参数 :
Sr.No. | 参数&说明 | 输入 | 默认值 |
---|---|---|---|
1 | $ val 它找到边界的特定值. | 列表 | 无 |
2 | $ elem 它用于提取边框组件. | 关键字 | 无 |