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