Sass 基本函数
Sass 中的常用函数
一、字符串函数
1. unquote($string): 删除字符串前后的引号,删除一对引号,如果这个字符串没有带有引号，将返回原始的字符串。
示例:
.text1 { content: unquote("'hello'");}
2. quote($string): 给字符串添加引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错(解决方案就是去掉空格，或者加上引号)。同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错.
示例:
.text2 { content: quote(hello-word);}
3. 大小写转换
to-upper-case($string);//转大写
to-lower-case($string);//转小写
示例:
.text3 { text: to-upper-case(aAaA); text: to-lower-case(aAaA); }
二、 数字函数
1. percentage($value)：将一个不带单位的数转换成百分比值；
2. round($value)：将数值四舍五入，转换成一个最接近的整数，可以带单位；
3. ceil($value)：向上舍入为整数，可以带单位；
4. floor($value)：将一个数去除他的小数部分，可以带单位；
5. abs($value)：返回一个数的绝对值，可以带单位；
6. min($numbers…)：找出几个数值之间的最小值，可以带同类型单位；
7. max($numbers…)：找出几个数值之间的最大值，可以带同类型单位；
8. random(): 获取随机数
示例:
1 .header { 2 width: percentage(.2);//20% 3 height: percentage(2px / 3px);//66.66667% 4 5 margin: round(3.2px);//3px 6 7 padding: ceil(2.1px);//3px 8 9 border-width: floor(3.9px);//3px 10 11 font-size: abs(-10px);//10px 12 13 top: min(5px, 10px, 20px, 2px);//2px 14 left: max(5px, 10px, 20px, 2px);//20px 15 16 border-radius: floor(random()*10px);//这个值真是不知道怎么说 17 }
三、 列表函数
1. length($list)：返回一个列表的长度值,函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错;
2. nth($list, $n)：返回一个列表中指定的某个标签值,索引从1开始，$n必须大于0，不然报错(SyntaxError: List index 0 must be a non-zero integer for `nth')
3. join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
4. append($list1, $val, [$separator])：将某个值放在列表的最后；
5. zip($lists…)：将几个列表结合成一个多维的列表；
6. index($list, $value)：返回一个值在列表中的位置值。
示例:
$list:1px,2px,3px,4px,5px; h1 { font-size: length($list);//5 line-height: nth($list,3); margin: index($list,5px); }
输出:
1 h1 { 2 font-size: 5; 3 line-height: 3px; 4 margin: 5; }
join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错(SyntaxError: $separator: (#ddeeee #eeffff) is not a string for `join')
可选参数 $separator; 定义列表元素的分隔符;默认auto 自动识别；comma 使用,分割；space 使用空格分隔；
示例:
1 h2 { 2 content: join($list,(6px,7px,8px),space);//返回新字符串 3 } 4 h3 { 5 content: append($list,9px); 6 } 7 h4{ 8 //zip()函数中每个单一列表的值对应的取其相同位置值： 9 content: zip((1px 2px 3px),(solid dashed dotted),(green blue red)); 10 }
输出:
1 h2 { 2 content: 1px 2px 3px 4px 5px 6px 7px 8px; } 3 4 h3 { 5 content: 1px, 2px, 3px, 4px, 5px, 9px; } 6 7 h4 { 8 content: 1px solid green, 2px dashed blue, 3px dotted red; }
四、 Introspection函数 包含几个判断类型函数
1. type-of($value)：返回一个值的类型
返回值：
number 为数值型。
string 为字符串型。
bool 为布尔型。
color 为颜色型。
2. unit($number)：返回一个值的单位；
3. unitless($number)：判断一个值是否带有单位，不带返回true，带单位返回false
4. comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并；可以返回true，不可以反悔false
示例:
h1{ content: type-of(true);//bool }
五、 Miscellaneous 函数
三元条件函数，他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：if($condition,$if-true,$if-false)
示例:
.text4 { padding: if(true,2px,3px); }
输出:
.text4 { padding: 2px; }
六、 map 类型
Sass中的map 常常被称为数据地图，又有人称其为数组，应为他总是以 key:value 成对出现，更像是一个JSON数据
示例:
$color: (
default: #fff,
primary: #22ae39,
negative: #d9534f
);
map 的函数功能。Sass中map自带七个函数
1. map-get($map, $key): 根据key值，返回map中的相关的值
2. map-merge($map1, $map2): 将两个 map 合并成一个新的 map
3. map-remove($map, $key): 从map中删除一个key，返回一个新的map
4. map-keys($map): 返回 map 中所有的key
5. map-values($map): 返回 map 中所有的value
6. map-has-key($map, $key): 根据给定的 key 值判断map是否有对应的value值，如果有返回true，否则返回false
7. keywords($args): 返回一个函数的参数，这个参数可以动态的设置key和value
map-get($map, $key) 示例:
1 $social-colors: ( 2 dribble: #ea4c89, 3 facebook: #3b5998, 4 github: #171515, 5 google: #db4437, 6 twitter: #55acee 7 ); 8 .btn-dribble{ 9 color: map-get($social-colors, facebook); 10 //如果 $key 不在 $map 中，不会编译出 CSS，其实 map-get 返回了一个 null 值。 11 background-color: map-get($social-colors, weibo); 12 }
/* * map-get($map, $key) 示例 */ .btn-dribble { color: #3b5998; }
map-has-key($map, $key) 示例:
1 /*定义一个函数判断 $key 是否在 $map 中 否则报错*/ 2 @function colors($color){ 3 @if not map-has-key($social-colors, $color){ 4 @warn "No color found for #{$color} in $social-colors map. Property omitted."; 5 } 6 @return map-get($social-colors, $color); 7 } 8 9 .btn-dribble { 10 color: colors(dribble); 11 } 12 .btn-facebook { 13 color: colors(facebooks); 14 }
输出:
.btn-dribble { color: #ea4c89; }
