sass06 mixin

scss

@mixin cont{    //mixin是关键字
    color:red;
}

body{
    @include cont;  //使用默认值
}

@mixin cont($color: red ){  //默认值
  color: $color;
}


body1{
    @include cont(#fff);  //传参数
}

@mixin cont($color: red, $fontSize: 14px){  //mixin是关键字
  color: $color;
  font-size: $fontSize;
}

body2{
  @include cont($fontSize: 18px);    //map方式传值
}

@mixin box-shadow($shadow...){    //多值参数
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

.shadows{
  @include box-shadow(0px 4px 4px #555, 2px 6px 10px #6dd3ee);
}

@mixin style-for-iphone{
  @media only screen and (min-device-width: 320px) and (max-device-568px){
    @content;    //下面的font-size: 12px;
  }
}

@include style-for-iphone{
  font-size: 12px;
}

css

body {
  color: red;
}

body1 {
  color: #fff;
}

body2 {
  color: red;
  font-size: 18px;
}

.shadows {
  -moz-box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee;
  -webkit-box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee;
  box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee;
}

@media only screen and (min-device- 320px) and (max-device- 568px) {
  font-size: 12px;
}

/*# sourceMappingURL=demo1.css.map */