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); }