sass学习9——自定义函数

自定义函数是用户根据自己的一些特殊要求编写的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");
    }
}