Scss学习--关于Scss指令@mixin、@include、@content、@function

@include

导入mixin定义的“类”样式

@mixin

用于定义可重复使用的样式，避免了使用无语意的 class

@mixin large-text{
    font: {
        family:Arial;
        size: 20px;
        weight: bold;
    }
    color: #f00;

    .divbox{
        height: 500px;
        width: 60px;
        margin-top: 10px;

        &:hover{
            a{
                text-decoration: underline;
            }
        }

        * html & { 
            height: 1px 
        };
    }
}
p{
    @include large-text();
}
//编译为scss
p{
   font: {
        family:Arial;
        size: 20px;
        weight: bold;
    }
    color: #f00;

    .divbox{
        height: 500px;
        width: 60px;
        margin-top: 10px;

        &:hover{
            a{
                text-decoration: underline;
            }
        }

        * html & { 
            height: 1px 
        };
    }
}

@mixin的默认参数

@mixin large_barside($height,$width:10px){  
//默认参数$width的默认值为10px;
    div.barside{
        @if unitless($height){
            @warn "Assuming #{$width} to be in pixels";
        }
        @if unitless($width){
            @warn "Assuming #{$width} to be in pixels";
        }
        height: $height;
        width: $width;
    }
}

p{
    @include large_barside(15px); 
    //会向large_barside传递一个参数形式参数
    //此时会运用@mixin的默认参数
}

@include large_barside(15px,20px );
//会向large_barside传递两个参数形式参数


@include large_barside($width:15px,$height:20px ); 
//会向large_barside传递两个关键字参数，
//分别是参数$width值为15px,参数$height值为20px

@mixin box-shadow($shadows...) { //参数变量
//不知道会传入多少个参数是就用参数变量全部获取后面的值
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  }
  .shadows {
    @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
  }

$num_list:1px 2px 3px 4px;
@mixin margin-default($distance...){
    margin:$distance;
}
p{
    @include margin-default($num_list);
}

中间变量传参

@mixin stylish-mixin($height,$width){
    color: $height;
    width: $width;
}

@mixin wrapped-stylish-mixin($args...) {
//这里的$args就是个中间变量的定义
//将获取的参数从wrapped-stylish-mixin传递向stylish-mixin
    font-weight: bold;
    @include stylish-mixin($args...);
}

.stylish {  
    @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

@content

会获取include{}中传递过来的所有内容(是{ }，而不是（）)

//exa1
@mixin apply-to-ie6-only {
    * html {
      @content; 
      //会被替代为 background-image: url(/logo.gif);
    }
  }
  @include apply-to-ie6-only {
    #logo {
      background-image: url(/logo.gif);
    }
  }

//exa2
  @mixin apply_conversation{
      body{
          @content;
         //会被替代为 height: 200px; width: 100px;
      }
  }
  @include apply_conversation{ 
  //{}引入部分将作为content传入
      height: 200px;
      width: 100px;
  }

//exa3
  $color: white;
  @mixin colors($color: blue) {
    background-color: $color;
    @content; //会被替换为 color: $color; 
    border-color: $color;
  }
  .colors {
    @include colors { color: $color; }
  }

@function

定义一个函数

  @function get_height($value_height){
      @if unitless($value_height){
          @warn "#{$value_height} value is error";
      }
      @return $value_height*1.5;
  }
 p.func{
      height: get_height($value_height:10px);
  }