Sass 基础(六)

join() 函数
　　　join()函数是将两个列表连接合并成一个列表。
　　　>>join(10px 20px, 30px 40px)
　　　　　　(10px 20px 20px 40px)
　　　>>join((blue,red),(#abc,#def))
　　　　　　(#0000ff,#ff0000,#aabbcc,#ddeeff)
　　　不过join()只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错
　　　将多个join（）函数合并在一起使用
　　　>>join((blue red),join((#abc #def),(#dee #eff)))
　　　　(#0000ff #ff0000 #aabbb)
　　　在join()函数中还有一个特别的的参数$separator,这个参数主要是用来给列表函数连接列表值是，使用的
　　　分割符号，默认为auto.
　　　join()函数中$separator 除了默认值auto之外。还有comma 和space 两个值，其中comma指定列表中的列表
        值之间使用空格（，）分割。space 值指定列表中的列表项之间使用空格() 分割。
　　　在join()函数中除非明确指定了$separator值，否则将会有多种情形发生
　　　如果列表中的第一个列表中每个值之间使用的是逗号（，）那么join()函数合并的列表中每个列表项之间使用的逗号，分割：
　　　>> join((blue, red,#fff),(green orange))
　　　　(#0000ff,#ff0000,#eeffff,#08000,#ffa500)
　　　但当第一个列表中只有一个列表项，那么 join() 函数合并的列表项
　　　目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用
　　　的，如果第二列表项中使用是,分隔，则使用逗号分隔；如果第二列
　　　项之间使用的空格符，则使用空格分隔：
　　   >>join(blue,(green,orang))
 　　　　　　(#0000ff,#008000,#ffa500)
　　　>>join((blue green),(red orange))
　　　　　　(#0000ff #008000 #ff0000 #ffa500)
　　 如果当两个列表中的列表项小于1时，将会以空格分隔：
　　>>join(blue,red)
　　　　(#0000ff #ff0000)

　　　　append()函数
　　　　ppend()函数是用来将某个值插入到列表中，并且处于最末位
　　>>append(10px 20px ,30px)
　　　　(10px 20px 30px)
　　>>append((10px,20px),30px)
　　　　(10px,20px,30px)
　　>>append(green,red)
　　　　(#008000 #ff0000)
　　>>append(red,(greenblue))
　　　　(#ff0000(#008000, #0000ff))
　　如果没有明确的指定$separator 参数值，其默认值是auto
　　如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。
　　如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔；
　　如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。
　　当然，在append()函数中，可以显示的设置$separator 参数，
　　如果取值为comma 将会以逗号分隔列表项
　　如果取值为space将会空格分隔列表项
　　>>append((blue green),red,comma)
　　　　　(#0000fff,#008000,#ff0000)
　　>>append((blue green),red,space)
　　　　(#0000ff #008000 #ff0000)
　　>>append((blue,green),red,comma)
　　　　(#0000ff,#008000,#ff0000)
　　>>append((blue,green),red,space)
　　　　(#0000ff #008000 #ff0000)
　　>>append(blue,red,space)
　　　　(#0000ff #ff0000)
zip()函数
　　zip()函数将多个列表值转成一个多维的列表：
　　>>zip(1px 2px 3px,solid dashed dotted,green blue red)
　　　　((1px "solid" #008000),(2px "dashed" #0000ff),(3px "dotted" #ff0000))
　　在使用zip(1px 2px 3px,solid, green blue red)
　　　　NoMethodError:undefined method 'options=' fornil:NilClass
　　Use --trace for backtrace
　　　　zip() 函数组合出来就成了
　　　　　　1px solid green, 2px dashed blue, 3px dotted red
index()函数
　　　　index()函数类似于索引一样，主要让你找到某个值在列表中所处的位置。在Sass 中，第一个值就是1
　　　　第二个值就是2，以此类推：
　　　　>> index(1px solid red,1px)
　　　　　　1
　　　　>>index(1px solid red, solid)
　　　　　　2
　　　　>>index(1px solid red, red)
　　　　　　3
　　　　在index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是false, 相反就会返回对应的
　　　　的值在列表中所处的位置。
　　　　>> index(1px solid red,dotted) //列表中没有找到 datted
　　　　　　false
　　　　>>index(1px solid red, solid) //列表中找到solid 值并且返回的他的位置是2
　　　　　　2
Introspection 函数
　　Introspection 函数的包括几个判断型函数。
　　type-of($value):返回一个值的类型
　　unit($number): 返回一个值的单位
　　unitless($number)判断一个值是否带有单位
　　comparable($number-1,$number-2); 判断两个值是否可以做加，减合并。
　　Introspection 函数 -type-of()
　　　　type-of()函数主要是用来判断一个值是属于什么类型：
　　返回值：
　　　　number 为数值类型。
　　　　string 为字符串类型
　　　　bool为布尔类型
　　　　color为颜色类型
　　　　>> type-of(100)
　　　　　　“number”
　　　　>>type-of(100px)
　　　　　　"number"
　　　　>>type-of("asdf")
　　　　　　"string"
　　　　>>type-of(asdf)
　　　　　　"string"
　　　　>>type-of(true)
　　　　　　"bool"
　　　　>>type-of(false)
　　　　　　"bool"
　　　　>>type-of(#fff)
　　　　　　"color"
　　　　>>type-of(blue)
　　　　　　"color"
　　　　>>type-of(1/2 =1)
　　　　　　"string"
unit() 函数
　　　　unit()函数主要是用来获取一个值所使用的的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”
　　　　的值，不过只许乘除运算
　　　　>>unit(100)
　　　　　　""
　　　　>>unit(100px)
　　　　　　"px"
　　　　>>unit(20%)
　　　　　　"%"
　　　　>>unit(1em)
　　　　　　"em"
　　　　>>unit(10px * 3em)
　　　　　　"em * px"
　　　　>>unit(10px * 2em /3cm /1rem)
　　　　　　"em/rem"
　　　　但加，减碰到不同单位时，unit() 函数将会报错，除px 与cm ,mm 运算之外
　　　　>>unit(1px + 1cm)
　　　　　　"px"
　　　　>>unit(1px -1cm)
　　　　　　"px"
　　　　>>unit(1px +1mm)
　　　　　　"px"
　　　unit()函数对于单位运算相对来说也没有规律，而且有些单位也无法合并成一个单位，对于我们在css 中不并不合适
　　　　>> unit(10px * 3em)
　　　　　　"em * px"
　　　　>> unit(10px / 3em)
　　　　　　"px/em"
　　　　>>unit(10px * 2em / 3cm / 1rem)
　　　　　　"em/rem"
unitless()函数
　　　　unitless() 函数相对来说简单明了些，只是用来判断一个值时候带有单位
　　　　如果不带单位返回的值为true,带单位返回的值为flase;
　　>>unitless(100)
　　　　true
　　>> unitless(100px)
　　　　false
　　>>unitless(100em)
　　　　false
　　>>unitless(100%)
　　　　false
　　>>unitless(1/2)
　　　　true
　　>>unitless(1/2 +2)
　　　　true
　　>>unitless(1px /2 +2)
　　　　false
comparable() 函数
　　　　comparable()函数主要是用来判断两个数是否可以进行 加 ，减 以及合并，如果可以返回值为true ，如果不
　　　　可以返回的值为false;
　　　　>>comparable(2px,1px)
　　　　　　true
　　　　>>comparable(2px,1%)
　　　　　　false
　　　　>>comparable(2px,1em)
　　　　　　false
　　　　>>comparable(2rem,1em)
　　　　　　false
　　　　>>comparable(2px,1cm)
　　　　　　true
　　　　>>comparable(2px,1mm)
　　　　　　true
　　　　>>comparable(2px,1rem)
　　　　　　false
　　　　>>comparable(2cm,1mm)
　　　　　　true
Miscellaneous 函数
　　　　在这里吧Miscellaneous 函数称为第三元条件函数，主要因为他和JavaScript
　　　　中的三元判断非常的相似，他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值。
　　　　if($condition,$if-true,$if-false)
　　　　上面表达式的意思是当 $condition 条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值。
　　　　>>if(true,1px,2px)
　　　　　　1px
　　　　>>if(false,1px,2px)
　　　　　　2px
　　　　　　Map
　　　　Sass的map 常常被称为数据地图，也有人称其为数组，因为他总是以key:value 成对的出现，单其更像是JSON数据
　　　　　　{
　　　　　　　　"employees":[
　　　　　　　　　　{"firstName":"John","lastName":"Doe"},
　　　　　　　　　　{"firstName":"Anna","lastName":"Smith"}
　　　　　　　　　　{"firstName":"Peter","lastName":"Jones"}
　　　　　　　　]
　　　　}
　　　　那么Sass 的map长得与JSON极其相似：
　　　　$map:{
　　　　　　$key1:value1,
　　　　　　$key2:value2,
　　　　　　$key3:value3,
　　　　}

　　　　首先由一个类似于Sass的变量一样，用个￥加上命名空间来声明map.后面紧接着是一个小括号().
　　　　将数据是一个小括号()，将数据以key:value的形式赋予，其中key 和value是成对出现，并且每对之间使用
　　　　逗号（，）分隔，其中最后一组后面没有逗号。
　　　　其中键 key 是用来查找相关联的值 value。使用 map 可以很容易
　　　　收集键的值和动态插入。我们来回忆一下，在 Sass 中常用下面的方式定义变量：
　　　　$default-color:#fff !default:
　　　　$primary-color:#22ae39 !default;
　　　　我们使用map可以更好的进行管理：
　　　　　　$color:(
　　　　　　　　default:#fff,
　　　　　　　　primary:#22ae39,
　　　　　　negative:#d9534f
　　　　);
　　　　对于Sass 的map,还可以让map 嵌套map其实就是map 的某一个key当成map，里面可以继续
　　　　放一对或者多对key：value;
　　　　$map:(
　　　　　　key1:value1,
　　　　　　key2:(
　　　　　　　　key-1:value-1,
　　　　　　　　key-2:value-2,
　　　　　　),
　　　　　　key3:value3
　　　　);
　　用此功能来管理颜色的变量就非常的有条理性。
　　$them-color:(
　　　　　　default:(
　　　　　　　　bgcolor:#fff,
　　　　　　　　text-color:#444,
　　　　　　　　link-color:#39f
　　　　),
　　primary:(
　　　　　　bgcolor:#000,
　　　　　　text-color:#fff,
　　　　　　link-color:#93f
　　),
　　negative:(
　　　　　　bgcolor:#f36,
　　　　　　text-color:#fefefe,
　　　　　　link-color:#d4e
　　　　)
　　);
Sass Maps的函数
　　　　前面介绍了使用map 来管理变量，但要在Sass 中获取变量，或者对map做更多有意的操作，我们必须
　　　　借助 map的函数功能 在Sass 中map 自身带了七个函数：
　　　　map-get($map,$key) 根据给定的key值，返回map 中相关的值
　　　　map-merge($map1,$map2):将两个 map 合并成一个新的map
　　　　map-remove($map,$key):从map 中所有的key
　　　　map-keys($map):返回map 中所有的key
　　　　map-values($map):返回map 中所有的value
　　　　map-has-key($map, $key): 根据给定的key 值判断，map 是否有对应的value值
　　　　如果有返回true,否则返回false
　　　　keywords($args):返回一个函数的参数，这个参数可以动态的设置key 和value.
　　　　Sass Maps的函数-map-get($map,$key)
　　　　map-get($map,$key) 函数的作用是根据$key参数，返回$key 在$map 中对应的value
　　　　如果$key不存在的$map中,将返回null 此函数包括两个参数：
　　　　$map:定义好的map
　　　　$key:需要遍历的key.
　　　　来看一个简单的示例，假设定义了一个$social-colors 的map：
　　　　　　$social-colors:(
　　　　　　　　　　dribble:#ea4c89,
　　　　　　　　　　facebook:#3b5998,
　　　　　　　　　　github:#171515,
　　　　　　　　　　google:#db4437,
　　　　　　　　　　twitter:#55acee
　　　　　　　　);
　　　　假设要获取facebook 键值对应的值#3b5998,我们就可以使用map-get() 函数来实现；
　　　　.btn-dribble{
　　　　　　　　color:map-get($social-colors,facebook);
　　　　}
　　　　编译出来的CSS：
　　　　.btn-dribble{
　　　　　　　　color:#3b5998;
　　　　　　}
　　　　我们来看另一种情况，假设 $social-colors 这个 map 没有 $weibo 这个 key:
　　　　.btn-weibo{
　　　　　　　　font-size:12px;
　　　　　　　　color:map-get($soscial-colors,weibo);
　　　　}
　　　　此时编译出来的是CSS：
　　　　.btn-weibo{
　　　　　　　　font-size：12px;
　　　　}
Sass Maps 的函数-map-has-key($map,$key)
　　map-has-key($map,$key) 函数将返回一个布尔值，当$map 中有这个$key,则函数返回true，否则返回false
　　前面的示例，当 $key 不在 $map 中时，使用 map-get($map,$key) 函数将返回一个 null 值
　　但对于开发人员，并看不到任何提示信息。如果使用 map-has-key($map,$key) 函数就可以改变这一状态。
　　@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."
　　　　　　}
　　　　编译出来：
　　　　.btn-fackbook{
　　　　　　　　color:#3b5998;
　　　　}
　　有了这个函数我们就可以这样使用。
　　.btn-dribble{
　　　　　　color:colors(dribble);
　　　　}
　　.btn-facebook{
　　　　　　color:colors(facebook)
　　}
　　.btn-github{
　　　　　　color:colors(github);
　　}
　　.btn-google{
　　　　　　color:color(google)
　　}
　　.btn-twitter{
　　　　　　color:colors(twitter)
　　}
　　.btn-weibo{
　　　　color:colors(weibo)
　　}
　　编译出来的css
　　.btn-dribble{
　　　　　　color:#ea4c89;
　　}
　　.btn-facebook{
　　　　　　color:#3b5998;
　　}
　　.btn-github{
　　　　　　color:#171515;
　　}
　　.btn-google{
　　　　　　color:#db4437;
　　}
　　.btn-twitter{
　　　　　　color:#55acee;
　　}
Sass Maps 的函数-map-keys($map)
　　　　map-keys($map) 函数将会返回$map 中的所有的key. 这些值赋予一个变量，那么他就是一个列表。
　　　　map-keys($social-colors);
　　　　其返回的值为：
　　　　　　"dribble","facebook","github","goole","twitter"
　　　　换句话说：
　　　　　　$list:"dribble","facebook","github","twitter";
　　　　这个时候，可以配合Sass 的list 做很多事情。
　　　　@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-color,$color);
　　　　}
　　　　上面代码中最不同之处，我们使 用map-key s将 $social-colors
　　　　这个 map 的所有 key 取出，并赋予给一个名 为 $names 的列表
　　　　然后通过 index($names,$color) 返回 $color 在 $names 位置
　　　　如果这个位置不存在，将返回提示信息，如果存在将返回正确的值。
　　　　.btn-weibo{
　　　　　　color: colors(weibo);
　　　　}
Sass Maps的函数-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 也将会全部获取出来。
　　　　如前面的示例 使用：
　　　　　　map-values($social-colors)
　　　　将会返回：
　　　　　　#ea4c89, #3b5998,#171515,#db4437,#55acee
　　　　值与值之前同样用逗号分隔。
　　　　　　map-merge($map1,$map2)

　　　　　　map-merge($map1,$map2)
　　　　　　map-merge($map1,$map2) 函数是将$map1和$map2 合并，然后等到一个新的$map. 如果你要快速将新的值导入到$map
　　　　中的话，这种方法是最佳方法，假设我们有两个$map:
　　　　　　$color:(
　　　　　　　　　　text:#f36,
　　　　　　　　　　link:#f63,
　　　　　　　　　　border:#ddd,
　　　　　　　　　　backround:#fff;
　　　　　　)
　　　　$typo:(
　　　　　　font-size:12px,
　　　　　　lin-height:1.6
　　　　);
　　　　如果希望将这两个$map 合并成一个map ，我们只要这样做。
　　　　$newmap: map-merge($color,$typo);
　　　　将会生成一个新的map：
　　　　　　$newmap:(
　　　　　　　　　　text:#f36,
　　　　　　　　　　link:#f63,
　　　　　　　　　　border:#ddd,
　　　　　　　　　　background:#fff,
　　　　　　　　　　font-size:12px,
　　　　　　　　　　line-height:1.6
　　　　);
Sass Maps 的函数-map-remove($map,$key),keywords($args)
　　　　map-remove($map,$key)
　　　　map-remove($map,$key)函数是用来删除当前$map中的某一个$key,从而得到一个新的
　　　　map,其返回的值是一个map.他并不能直接从一个map 中删除另一个map，仅能通过删除
　　　　map中的某个key 得到新的map
　　　　$map:map-remove($social - colors,dribble);
　　　　返回的是一个新map
　　　　　　$map:(
　　　　　　　　facebook:#3b5998,
　　　　　　　　github:#171515,
　　　　　　　　google:#db4437,
　　　　　　　　twitter:#55acee
　　　　　　);
　　　　　keywords($args)
　　　　　keywords($args)
　　　　keywords($args) 函数可以通过混合宏或函数的参数变创建map.
　　　　参数也是成对出现，其中$args 变成key(会自动去掉$符号)，而
　　　　$args对应的的值是value.
　　　　@mixin map($args...){
　　　　　　　　@debug keywords($args);
　　　　　　}
　　　　@include map(
　　　　　　　　$dribble: #ea4c89,
　　　　　　　　$facebook:#3b5998,
　　　　　　　　$github:#171515,
　　　　　　　　$google:#db4437,
　　　　　　　　$twitter:#55acee
);