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(): 获取随机数

　　示例:

.header {
    width: percentage(.2);//20%
    height: percentage(2px / 3px);//66.66667%

    margin: round(3.2px);//3px

    padding: ceil(2.1px);//3px

    border-width: floor(3.9px);//3px

    font-size: abs(-10px);//10px

    top: min(5px, 10px, 20px, 2px);//2px
    left: max(5px, 10px, 20px, 2px);//20px

    border-radius: floor(random()*10px);//这个值真是不知道怎么说
}

三、 列表函数

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

　　输出:

h1 {
  font-size: 5;
  line-height: 3px;
  margin: 5; }

　　　　join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错(SyntaxError: $separator: (#ddeeee #eeffff) is not a string for `join')
    可选参数 $separator; 定义列表元素的分隔符;默认auto 自动识别；comma 使用,分割；space 使用空格分隔；

　　示例:

h2 {
    content: join($list,(6px,7px,8px),space);//返回新字符串
}
h3 {
    content: append($list,9px);
}
h4{
    //zip()函数中每个单一列表的值对应的取其相同位置值：
    content: zip((1px 2px 3px),(solid dashed dotted),(green blue red));
}

　　输出:

h2 {
  content: 1px 2px 3px 4px 5px 6px 7px 8px; }

h3 {
  content: 1px, 2px, 3px, 4px, 5px, 9px; }

h4 {
  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) 示例:

$social-colors: (
        dribble: #ea4c89,
        facebook: #3b5998,
        github: #171515,
        google: #db4437,
        twitter: #55acee
    );
.btn-dribble{
    color: map-get($social-colors, facebook);
      //如果 $key 不在 $map 中，不会编译出 CSS，其实 map-get 返回了一个 null 值。
      background-color: map-get($social-colors, weibo);
}

/*
* map-get($map, $key) 示例
*/
.btn-dribble {
  color: #3b5998; }

　　map-has-key($map, $key) 示例:

/*定义一个函数判断 $key 是否在 $map 中 否则报错*/
@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);
}
.btn-facebook {
    color: colors(facebooks);
}

　　输出:

.btn-dribble {
  color: #ea4c89; }