Foundation SASS 阅读 | _function

Posted 2020-06-17

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

---

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


转载请注明出处（带有 前端乱炖 字样）和本文的显式链接(http://www.html-js.com/article/2579)，本站和作者保留随时要求删除文章的权利！