Foundation SASS 阅读 | _function

unction

列表

• export
• lower-bound
• upper-bound
• strip-unit
• text-inputs
• convert-to-rem
• data
• rem-calc
• emCalc
• em-calc

简介

common

html 和 body 默认的字体大小，全局设置 1rem = 16px

$rem-base: 16px !default; 

export

只 import 一次，若是有 compenents 依赖其余 compenents 阻止屡次加载 这个函数只是用来读写 $modules 这个全局变量

注意： 这是一个 mixin 不是一个函数

注意： 第一次执行 exports(moduleA) 以后，再次执行 exports(moduleA),此时再也不进行加载， 由于第一次执行以后，moduleA 已经注入到全局对象 $modules 中

$modules: () !default; @mixin exports($name) {  // 调用全局对象 $modules: $modules !global;  // 检测依赖模块是否已经存在全局模块列表中 $module_index: index($modules, $name); @if (($module_index == null) or ($module_index == false)) {  // 若是全局列表中不存在此依赖模块，则写入并修改全局变量 $modules: append($modules, $name) !global; @content; } } 

lower-bound

返回列表中的第一个元素，列表长度为空，则返回 0

标注: 返回列表中的一个最小值，媒体查询会用到

@function lower-bound($range){ @if length($range) <= 0 { @return 0; } @return nth($range,1); } 

upper-bound

返回列表中的第二个元素，列表长度小于2时，则返回 999999999999

即返回列表中的一个最大值，媒体查询会用到

@function upper-bound($range){ @if length($range) < 2 { @return 999999999999; } @return nth($range,2); } 

strip-unit

取掉单位

例如：调用 strip-unit(2px) 则返回 2

@function strip-unit($num) { @return $num / ($num * 0 + 1); } 

text-inputs

返回一个包含指定元素属性的列表 通常指定都是 input

通常用于生成input 元素

例如： 
执行 text-inputs() 则返回

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea 

执行 text-inputs((week, text)) 则返回

input[type="week"], input[type="text"] 

执行 text-inputs((week, text), div) 则返回

div[type="week"], div[type="text"] 

---

@function text-inputs( $types: all, $selector: input ) { $return: (); $all-text-input-types: text password date datetime datetime-local month week email number search tel time url color textarea; @if $types == all { $types: $all-text-input-types; } @each $type in $types { @if $type == textarea { @if $selector == input { $return: append($return, unquote('#{$type}'), comma) } @else { $return: append($return, unquote('#{$type}#{$selector}'), comma) } } @else { $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma) } } @return $return; } 

convert-to-rem

其余单位和 rem 的换算

例如： convert-to-rem(32) 即返回的是 2 rem

调用时多传 整数

@function convert-to-rem($value, $base-value: $rem-base) { $value: strip-unit($value) / strip-unit($base-value) * 1rem; @if ($value == 0rem) { $value: 0; // 把 0 rem 转换为 0 } @return $value; } 

data

拼接 HTML5 属性字符串

若是声明了命名空间，则属性名称以 data-$namespace 开头，不然直接以 data 开头

fd 在 _global.scss 文件中声明了 $namespace 变量 即 $namespace: false !default;

@function data($attr) { @if $namespace { @return '[data-' + $namespace + '-' + $attr + ']'; } @return '[data-' + $attr + ']'; } 

rem-calc

rem 换算 $rem-base 全局变量 默认为 16px 即浏览器默认字体大小

$values 能够是一个单独的字符串，也能够是一个列表

若是 $values 是一个单独的字符串，跟直接调用 convert-to-rem 没什么两样

@function rem-calc($values, $base-value: $rem-base) { $max: length($values); @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); } $remValues: (); @for $i from 1 through $max { $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value)); } @return $remValues; } 

emCalc em-calc

再也不建议使用

// Deprecated: We'll drop support for this in 5.1.0, use rem-calc() @function emCalc($values){ @return rem-calc($values); } 

---

转载请注明出处（带有 前端乱炖 字样）和本文的显式连接(http://www.html-js.com/article/2579)，本站和做者保留随时要求删除文章的权利！// Deprecated: We'll drop support for this in 5.1.0, use rem-calc() @function em-calc($values){ @return rem-calc($values); }