scss-函数

时间：2018-10-30 10:19:30 收藏：0 阅读：4539

　　在scss中除了可以定义变量，具有@extend和@mixins等特性之外，还自备了一系列的函数功能。

　　scss本身带有大量的内置函数，具体可以参阅官网函数模块。

　　一、字符串函数

unquote($string)：只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。
quote($string)：只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。

　　二、数字函数

percentage($value)：将一个不带单位的数转换成百分比值，如果转换的值是一个带有单位的值，那么在编译的时候会报错误信息：
round($value)：将数值四舍五入，转换成一个最接近的整数，可以携带单位的任何数值。
ceil($value)：将大于自己的小数转换成下一位整数；将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身1的整数。也就是只做入，不做舍的计算
floor($value)：将一个数去除他的小数部分；floor()函数刚好与ceil()函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值。

　　三、List函数

length($list)：返回一个列表的长度值；
nth($list, $n)：返回一个列表中指定的某个标签值
join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值。

　　四、自定义函数

　　可能有时候，内置的函数并不能够完全满足我们的需求，那么我们也自定义函数。

　　语法：

@function function-name($args) { 
  @return value-to-be-returned; 
}

　　@function开头声明一个函数，函数内部使用@return返回一个值，参数可以省略。总体来讲scss中的函数和JavaScript中的函数大同小异，并且具备某些ES2015函数的特点。函数可以放置在想要使用函数返回值的地方，scss代码实例如下

div { 
  font-size: font-size($args); 
}

　　特别说明:scss函数名中的中划线和下划线是等同的，font-size和font_size指向同一个函数。

@function column-width($col, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(3, 8); 
}

　　编译后的css代码如下：

.col-3 {
  width: 37.5%;
}

　　默认参数:scss代码实例如下:

@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(); 
}

　　参数名称后面跟着一个冒号，冒号后面就是规定的默认参数值；函数调用时，对应的参数没有传递值，那么就使用默认参数值，上面代码编译结果如下:

.col-3 {
  width: 37.5%;
}

　　再来看一段scss代码实例:

@function column-width($col:3, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

　　上面的代码会报错，函数调用时只传递了一个参数，但是函数声明时规定了两个参数，并且第二个参数没有默认值，也就是说函数调用时所传递的参数必须和声明时规定的参数对应起来。

@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

　　传递的参数会覆盖默认的参数，所以4会覆盖3，第二个参数使用默认值。编译结果如下:

.col-3 {
  width: 50%;
}

　　函数rest参数:

　　给函数传递的参数个数也许不是固定的，或者不能预知为函数传递参数的个数。代码实例如下:

@function column-width($index, $widths...){ 
  @return nth($widths, $index); 
}
.col-3 { 
  width: column-width(3, 25%, 50%, 75%, 100%); 
}

　　rest参数的形式是参数名称后面跟三个点。上面代码中，3会传递给$index，后面的剩余参数会都传递给$widths（$widths生成一个list列表）。nth()是一个内置函数，可以从列表中找到对应索引的值（索引是从1开始的，与大多数编程语言从0开始不同）。上面代码编译结果如下:

.col-3 {
  width: 75%;
}

　　文本超出范围，显示省略号

/*文本格式化，超出范围，显示省略号*/
@mixin text-overflow($width:100%,$display:block) {
  width: $width;
  display: $display;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}

　　调用@include text-overflow();也可以自己传入参数，display为block或inline-block才能达到预期的效果

　　编译的css代码如下：

    width: 100%;
    display: block;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;