SASS详解之函数(function)


		　SASS和其他语言脚本有类似之处。可以利用变量来构建自己的函数，这也是SASS迷人之处之一，原来写CSS还可以像写JavaScript那样拥有自己的逻辑。
 
　　自定义函数
 
　　SASS代码
[plain] 
$oneWidth: 10px;  
$twoWidth: 40px;  
  
@function widthFn($n) {  
  @return $n * $twoWidth + ($n - 1) * $oneWidth;  
}  
  
.leng {   
    width: widthFn(5);  
}  
 
　　编译后CSS代码
[css] 
.leng {  
  width: 240px;  
}  
 
　　通过上面可以看出，SASS中的函数可以使用全局变量，还可以接受像混合(mixin)一样的参数。函数可以有多个语句组成，但是必须设定返回值(return)。但是混合(mixin)就可以不用设置返回值即可操作。函数(function)传入的值也可以带有变量，如下
 
　　SASS代码
[plain]  
$oneWidth: 10px;  
$twoWidth: 40px;  
  
@function widthFn($n) {  
  @return $n * $twoWidth + ($n - 1) * $oneWidth;  
}  
  
.leng {   
    width: widthFn($n : 5);  
}  
 
　　编译后CSS代码
[css] 
.leng {  
  width: 240px;  
}  
 　　
　　字符串函数
 
　　字符串函数顾名思意是用来处理字符串的函数。Sass的字符串函数主要包括两个函数：unquote($string)——删除字符串中的引号和quote($string)——给字符串添加引号。
 
　　unquote()函数
 
　　unquote()函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。简单的使用终端来测试这个函数的运行结果。unquote()函数只能删除字符串最前和最后的成对引号(双引号或单引号)，而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。小例子如下
 
　　SASS代码
[plain] 
.test1 {  
    content:  unquote('梦龙小站!') ;  
}  
.test2 {  
    content: unquote("'梦龙小站!");  
}  
.test3 {  
    content: unquote("I'm 梦龙小站!");  
}  
.test4 {  
    content: unquote("'梦龙小站!'");  
}  
.test5 {  
    content: unquote('"梦龙小站!"');  
}  
.test6 {  
    /*没有引号不能加中文，不然会报错*/  
    content: unquote(menglong);  
}  
 
　　编译后CSS代码
[css]  
.test1 {  
  content: 梦龙小站!;  
}  
  
.test2 {  
  content: '梦龙小站!;  
}  
  
.test3 {  
  content: I'm 梦龙小站!;  
}  
  
.test4 {  
  content: '梦龙小站!';  
}  
  
.test5 {  
  content: "梦龙小站!";  
}  
  
.test6 {  
  /*没有引号不能加中文，不然会报错*/  
  content: menglong;  
}  
 
　　quote()函数
 
　　quote()函数刚好与unquote()函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号""。使用quote()函数增加只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。quote()碰到特殊符号，比如说!、?、>等，除中折号-和下划线_都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。小例子如下
 
　　SASS代码
[plain]  
.test1 {  
    content:  quote('梦龙小站!');  
}  
.test2 {  
    content: quote("梦龙小站!");  
}  
.test3 {  
    content: quote(ImMengLong);  
    /*  
    下面是错误写法  
    content: quote(Im Meng Long);  
        content: quote(梦龙小站!);  
        content: quote("梦龙小站!);  
    */  
}  
.test4 {  
    content: quote(' ');  
}  
 
　　编译后CSS代码
[css]  
.test1 {  
  content: "梦龙小站!";  
}  
  
.test2 {  
  content: "梦龙小站!";  
}  
  
.test3 {  
  content: "ImMengLong";  
}  
  
.test4 {  
  content: " ";  
}  
 
　　数字函数
 
　　Sass中的数字函数主要是对数字的一些功能。主要有percentage($value)、round($value)、ceil($value)、floor($value)、abs($value)、min($numbers…)和max($numbers…)。下面是用小例子来对他们进行说明。
 
　　percentage()
 
　　percentage()函数主要是将一个不带单位的数字转换成百分比形式，如果您转换的值是一个带有单位的值，那么在编译的时候会报错误信息。
 
　　SASS代码
[plain]  
/*  
错误写法，不能带单位  
percentage(2px / 10px)  
*/  
  
div {  
    width:percentage(.2);  
}  
a {  
    width:percentage(20);  
}  
span {  
    width:percentage(2/3);  
}  
 
　　编译后CSS代码
[css]  
div {  
  width: 20%;  
}  
  
a {  
  width: 2000%;  
}  
  
span {  
  width: 66.66667%;  
}  
 
　　round()函数
 
　　round()函数将一个数四舍五入为一个最接近的整数，在round()函数中可以携带单位的任何数值。
 
　　SASS代码
[plain] 
.meng1 {  
    width:round(.2);  
}  
.meng2 {  
    width:round(12.3);  
}  
.meng3 {  
    width:round(12.5);  
}  
.meng4 {  
    width:round(1.49999);  
}  
.meng5 {  
    width:round(2.2%);  
}  
.meng6 {  
    width:round(20%);  
}  
.meng7 {  
补充：综合编程 , 其他综合 ,