列表函数

列表函数-length()函数

length() 函数主要用来返回一个列表中有几个值。 length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错

列表函数-nth()函数

nth() 函数用来指定列表中某个位置的值。不过在 Sass 中，nth() 函数和其他语言不同，1 是指列表中的第一个标签值，2 是指列给中的第二个标签值，依此类推

语法：nth($list,$n)

注：在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数

$list:border-bottom (4px solid blue) black;
.box{
    display:nth($list,1);  
    /* display:nth($list,2); */
    /* display:nth($list,3); */
}
//css
.box {

  display: border-bottom; }
 2: .box {

  display: 4px solid blue; }
 3: .box {

  display: black; }

join()函数

join() 函数是将两个列表连接合并成一个列表。 join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错。如果想要让多个列表连接在一起，可以嵌套使用join。如果列表最内层的括号中有“，”，那么最后生成的列表也有“，”

.third{
    margin:join((2px 3px),(4px 5px));
}
//css
.third {

  margin: 2px 3px 4px 5px; }

append()函数

append() 函数是用来将某个值插入到列表中，并且处于最末位

如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。
如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔
如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔

>> append(10px 20px ,30px)
(10px 20px 30px)
>> append((10px,20px),30px)
(10px, 20px, 30px)
>> append(red,(green,blue))
(#ff0000 (#008000, #0000ff))

在 append() 函数中，可以显示的设置 $separator 参数

如果取值为 comma 将会以逗号分隔列表项
如果取值为 space 将会以空格分隔列表项

>> append((blue green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue green),red,space)
(#0000ff #008000 #ff0000)

zip()函数

zip()函数将多个列表值转成一个多维的列表; 在使用zip()函数时，每个单一的列表个数值必须是相同的

>> zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

index()函数

index() 函数类似于索引一样，主要让你找到某个值在列表中所处的位置。找不到返回false

>> index(1px solid red, solid)
2

Introspection函数

type-of()函数

type-of() 函数主要用来判断一个值是属于什么类型：

返回值：

number：为数值型。
string：为字符串型。
bool：为布尔型。
color：为颜色型。

unit()函数

unit() 函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，只充许乘、除运算

>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"

但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外（加减法取算式首个数值单位）

>> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"
>> unit(10px * 2em - 3cm / 1rem)
SyntaxError: Incompatible units: 'cm' and 'px*em'.

unitless()函数

unitless() 函数相对来说简单明了些，只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false

comparable()函数

comparable() 函数主要是用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false

>> comparable(2px,1%)
false
>> comparable(2px,1em)
false
>> comparable(2px,1cm)
true
>> comparable(2cm,1mm)
true

Miscellaneous函数

类似三元表达式

if($condition,$if-true,$if-false)

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

Maps的函数

map-get($map,$key)函数

map-get($map,$key) 函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}
//css
.btn-dribble {
  color: #3b5998;
}

map-has-key($map,$key)函数

map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key，则函数返回 true，否则返回 false。

当 $key 不在 $map 中时，使用 map-get($map,$key) 函数将返回一个 null 值

@if map-has-key($social-colors,facebook){
    .btn-facebook {
        color: map-get($social-colors,facebook);
    }
} @else {
    @warn "No color found for faceboo in $social-colors map. Property ommitted."
}
//css
.btn-fackbook{
    color: #3b5998;
}   

@function colors($color){
    @if not map-has-key($social-colors,$color){
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($social-colors,$color);
}
.btn-dribble {
    color: colors(dribble);
}
//css
.btn-dribble {
  color: #ea4c89;
}

map-keys($map)函数

map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量，那他就是一个列表

$social-colors:(
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
$list: map-keys($social-colors);
$list:"dribble","facebook","github","google","twitter";

$social-colors:(
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

$names:map-keys($social-colors);

@function colors($color){
    $names: map-keys($social-colors);
    @if not index($names,$color){
        @warn "Waring: `#{$color} is not a valid color name.`";
    }
    @return map-get($social-colors,$color);
}

@for $i from 1 through length(map-keys($social-colors)){
    .btn-#{nth(map-keys($social-colors),$i)} {
        color: colors(nth(map-keys($social-colors),$i));
    }
}

@each $color in $names{
    .btn-#{$color}{
        color:colors($color);
    }
}
最终@for和@each输出的结果都是：
.btn-dribble {
  color: #ea4c89; }

.btn-facebook {
  color: #3b5998; }

.btn-github {
  color: #171515; }

.btn-google {
  color: #db4437; }

.btn-twitter {
  color: #55acee; }

map-values($map)、map-merge($map1,$map2)函数

map-values($map)

map-values($map) 函数类似于 map-keys($map) 功能，不同的是 map-values($map )获取的是 $map 的所有 value 值，可以说也将是一个列表。而且，map-values($map) 中如果有相同的 value 也将会全部获取出来

$social-colors:(
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
map-values($social-colors)
#ea4c89,#3b5998,#171515,#db4437,#55acee

map-merge($map1,$map2)

map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话，这种方法是最佳方法

$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6
);
$newmap: map-merge($color,$typo);
$newmap:(
    text: #f36,
    link: #f63,
    border: #ddd,
    background: #fff,
    font-size: 12px,
    line-height: 1.6
);

map-remove($map,$key)、keywords($args)函数

map-remove($map,$key)

map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map，仅能通过删除 map 中的某个 key 得到新 map。如果删除的 key 并不存在于 $map 中，那么 map-remove() 函数返回的新 map 和以前的 map 一样

$social-colors:(
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

$map:map-remove($social-colors,dribble);
$map:(
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

keywords($args)

keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现，其中 $args 变成 key(会自动去掉$符号)，而 $args 对应的值就是value。

@mixin map($args...){
    @debug keywords($args);
}

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);
输出的debug信息：
 DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

map函数参考：https://www.cnblogs.com/whqet/p/Sassmap.html

16.函数(2)