标签:
列表函数主要有:
length($list)返回一个列表的长度值
.span{
width: length(1 2 3 5px);
}
编译出来的CSS为:
.span {
width: 4;
}
需要注意的是,length中的列表是以空格隔开的。而不是逗号。
nth(
与CSS的nth一样,index是从1开始的。
.span{
color: nth(red blue yellow, 1);
}
编译后的CSS为:
.span {
color: red;
}
join(
separator指定分隔符号,这一点与JS的join()函数一样
div{
font-family: join( (Helvetica "Helvetica Neue" "微软雅黑" ), (Tahoma Arial sans-serif), comma);
}
ul{
background: join(url("bgimage.gif"), (no-repeat fixed top),space);
}
编译出来的CSS为:
div {
font-family: Helvetica, "Helvetica Neue", "微软雅黑", Tahoma, Arial, sans-serif;
}
ul {
background: url("bgimage.gif") no-repeat fixed top;
}
在sass中,$separator默认是auto,此外还可以是comma(逗号)和space(空格),因为在auto的情况下,有很多的不确定性,所以我建议是,明确的指出连接符是comma或者ahispace.
append(
如果没有明确的指定 $separator 参数值,其默认值是 auto。
当然,在 append() 函数中,可以显示的设置 $separator 参数,
span{
background: append((url("bgimage.gif") no-repeat fixed), top, space);
}
编译出来的CSS为:
span {
background: url("bgimage.gif") no-repeat fixed top;
}
zip(
body{border:zip(1px 2px,solid,green blue red);}
div{border: zip(1px 2px 3px, solid dashed dotted, blue yellow pink);}
编译出来的CSS为:
body {
border: 1px solid green;
}
div {
border: 1px solid blue, 2px dashed yellow, 3px dotted pink;
}
从编译结果可以看出,当列表值的长度不相等时,只能以最短长度的作为标准,如上面的第一个例子。
index(
span{
width: index(2px solid red, red);
}
div{
width: index(2px solid red, dashed);
}
编译出来的CSS为:
span {
width: 3;
}
因为index(2px solid red, dashed)返回的值时false,那么就不会在编译结果中出现。
Introspection函数
Introspection 函数包括了几个判断型函数:
三元条件函数
if(
当
Map()成为数据地图,以key:value出现
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
Sass的map允许嵌套,其实就是把某一个key当成map,里面继续放一对或者多对的key:value
$map: (
key1: value1,
key2: (
key-1: value-1,
key-2: value-2,
),
key3: value3
);
如:
$theme-color: (
default: (
bgcolor: #ccc,
text-color: #000,
link-color: #39f
),
primary:(
bgcolor: #000,
text-color:#fff,
link-color: #93f
),
negative: (
bgcolor: #f36,
text-color: #fefefe,
link-color: #d4e
)
);
Map功能函数
map-get(
$fontSize: (
default: 12px,
lgSize: 24px,
mdSize: 18px
);
div{
font-size: map_get($fontSize, default);
}
编译出来的CSS为:
div {
font-size: 12px;
}
对于嵌套的map,需要多次使用map_get方法。
$theme-color: (
default: (
bgcolor: #ccc,
text-color: #000,
link-color: #39f
),
primary:(
bgcolor: #000,
text-color:#fff,
link-color: #93f
),
negative: (
bgcolor: #f36,
text-color: #fefefe,
link-color: #d4e
),
a: #123
);
div{
background-color: map-get(map-get($theme-color, primary),bgcolor);
}
编译出来的CSS为:
div {
background-color: #000;
}
当key不在map中时,map_get返回Null.不会返回错误
$fontSize: (
default: 12px,
lgSize: 24px,
mdSize: 18px
);
div{
font-size: map_get($fontSize, default);
color: map_get($fontSize,color);
}
编译出来的CSS为:
div {
font-size: 12px;
}
map-has-key(
map_get在获取值时,即使
应用:
$social-colors: (
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
@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-facebook {
color: colors(facebook);
}
.btn-github {
color: colors(github);
}
.btn-google {
color: colors(google);
}
.btn-twitter {
color: colors(twitter);
}
.btn-weibo {
color: colors(weibo);
}
编译出来的CSS为:
.btn-facebook {
color: #3b5998;
}
.btn-github {
color: #171515;
}
.btn-google {
color: #db4437;
}
.btn-twitter {
color: #55acee;
}
这里使用了自定义函数colors.
编译时会给出告警信息: No color found for ‘weibo’
上面的例子还可以用更简单的方式来写(利用@each指令):
@each $social-network,$social-color in $social-colors {
.btn-#{$social-network} {
color: $social-color;
}
}
这里使用的方法是 @each key,value in $map。需要注意的是:不能给key,value加上括号。
map-keys(
上面的例子还可以通过nth和for循环来写:
$social-colors: (
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
@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);
}
@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));
}
};
$globalColors: (
default: #ccc,
active: #DCFD63,
hover: #463DFD,
link: #FD7556
);
@function colors($color){
$names: map-keys($globalColors);
@if index($names, $color){
@return map-get($globalColors, $color);
}
@warn "Warning: ‘#{$color}‘ is not a valid color name.";
};
.btn-default{
color: colors(default);
&:hover{
color: colors(hover);
}
&:link{
color: colors(link);
}
&:active{
color: colors(active);
}
}
map-keys(
编译出来的CSS为:
.btn-default {
color: #ccc;
}
.btn-default:hover {
color: #463DFD;
}
.btn-default:link {
color: #FD7556;
}
.btn-default:active {
color: #DCFD63;
}
map-values(
$globalColors: (
default: #ccc,
active: #DCFD63,
hover: #463DFD,
link: #FD7556
);
span{
color: map-values($globalColors);
}
编译出来的CSS为:
span {
color: #ccc, #DCFD63, #463DFD, #FD7556;
}
返回的值与值之间,使用逗号分隔。这个例子并没有实际意义,仅仅是演示map-values($map)的功能。
map-merge(
如果
$globalColors: (
default: #ccc,
active: #DCFD63,
hover: #463DFD,
link: #FD7556
);
$globalFont: (
default: 14px,
large: 18px,
middle: 16px
);
$newmap: map-merge($globalColors, $globalFont);
@each $key,$value in $newmap{
.span-#{$key}{
#{$key}: $value
}
}
编译出来的CSS为:
.span-default {
default: 14px;
}
.span-active {
active: #DCFD63;
}
.span-hover {
hover: #463DFD;
}
.span-link {
link: #FD7556;
}
.span-large {
large: 18px;
}
.span-middle {
middle: 16px;
}
map-remove(
$globalColors: (
default: #ccc,
active: #DCFD63,
hover: #463DFD,
link: #FD7556
);
$newmap: map-remove($globalColors, default);
@each $key,$value in $newmap{
.span-#{$key}{
#{$key}: $value
}
}
编译出来的CSS为:
.span-active {
active: #DCFD63;
}
.span-hover {
hover: #463DFD;
}
.span-link {
link: #FD7556;
}
从编译结果可以看出,default已经被删除了。
keywords($args):返回一个函数的参数,这个参数可以动态的设置 key 和 value。
标签:
原文地址:http://blog.csdn.net/liuyan19891230/article/details/52278380