Sass中常用的函数

字符串函数

To-upper-case() 函数将字符串小写字母转换成大写字母
To-lower-case() 函数与 To-upper-case() 刚好相反，将字符串转换成小写字母

数字函数

Sass 中的数字函数提要针对数字方面提供一系列的函数功能：

percentage($value)：将一个不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：将大于自己的小数转换成下一位整数；
floor($value)：将一个数去除他的小数部分；
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值；
random(): 获取随机数

$value:0.8721;

$value2:3.68;

$value3:4.278;

.test1{

width:percentage($value);

}

.test2{

width:round($value)+px;

}

.test3{

width:ceil($value);

}

.test4{

width:floor($value);

}

.test5{

width:abs($value);

}

.test6{

width:min($value,$value2,$value3);

}

.test7{

width:max($value,$value2,$value3);

}

.test8{

width:random();

}

编译后的css:

.test1 { width: 87.21%; }

.test2 { width: 1px; }

.test3 { width: 1; }

.test4 { width: 0; }

.test5 { width: 0.8721; }

.test6 { width: 0.8721; }

.test7 { width: 4.278; }

.test8 { width: 0.43515; }

列表函数简介

列表函数主要包括一些对列表参数的函数使用，主要包括以下几种：

length($list)：返回一个列表的长度值；个人认为可以理解js中数组的length;
nth($list, $n)：返回一个列表中指定的某个标签值，不同于别的语言的是这个标签的值是从1开始的，而不是从0开始个人认为可以理解js中数组的下标，只不过这个下标是从1开始而不是从0开始;
join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值。

Introspection函数

Introspection 函数包括了几个判断型函数：

type-of($value)：返回一个值的类型
unit($number)：返回一个值的单位
unitless($number)：判断一个值是否带有单位
comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并

1、type-of() 函数主要用来判断一个值是属于什么类型：

返回值：

number 为数值型。
string 为字符串型。
bool 为布尔型。
color 为颜色型。

2、unit() 函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算：

但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外

unit() 函数对于单位运算相对来说也没有规律，而且有些单位也无法整合成一个单位，对于我们在 CSS 中运用中并不适合

换句话说，上面运算出来的单位，对于在 CSS 中使用将是没有任何意义的。

3、unitless() 函数相对来说简单明了些，只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false

具体例子，见如下代码清单。如下代码实现的功能：用户在调用混合宏时，如果用户没有给参数值加上单位，程序会自动加入单位。

//SCSS

@mixin adjust-location($x, $y) {

  @if unitless($x) {

    $x: 1px * $x;

  }

  @if unitless($y) {

    $y: 1px * $y;

  }

  position: relative;

  left: $x;

  top: $y;

}

.botton{

    @include adjust-location(20px, 30);

}

//编译后的css

.botton {

  position: relative;  left: 20px;  top: 30px; }

4、comparable() 函数主要是用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false

Miscellaneous函数

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

if($condition,$if-true,$if-false)

上面表达式的意思是当 $condition 条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值。

>> if(true,1px,2px)

1px

>> if(false,1px,2px)

2px