自定义函数是用户根据自己的一些特殊要求编写的Sass函数。在很多时候Sass自带的函数并不能满足功能上的需求，所以很多时候需要自定义一些函数。
如：需要去掉一个值的单位，这种情况下，Sass自带的函数是无法帮助我们完成的，这个时候就需要我们定义函数：
@function stripUnits($num){
@return $num/($num*0+1);
}
@function double($num){
@return $num*2;
}
.test{
content1:stripUnits(15px);
content2:double(5);
}
生成为：
.test {
content1: 15;
content2: 10; }
更严谨的写法：
@function stripUnits($num) {
@if not unitless($num) {
@return $num/($num*0+1);
}
@else {
@return $num;
}
}
@function double($num) {
@if type-of($num)=="number" {
@return $num*2;
}
@else {
@return $num;
}
}
.test {
content1: stripUnits(15px);
content2: double(5);
}
生成为：
.test {
content1: 15;
content2: 10; }
Sass高级用法
条件语句
@if 可以用来判断,@else
p{
@if 1+1 == 2 { border:1px solid;}
}
==上面代码与下面代码写法不一致单效果是一样的
p{
@if(1+1 == 2){ border:1px solid;}
}
并且是and/&&,或用 or、去反用not
返回语句 @return
循环语句
for循环：
@for $i from to 10{
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while循环：
$i:6;
@while $i>0 {
.item-#{$i} {
width: 2em * $i;
}
$i:$i - 2;
}
输出为：
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
each循环：
@each $member in a, b, c, d{
.#{$member}{
background-image:url("image/#{$member}.jpg");
}
}
