媒体查询+scss 响应式开发

```bash
$color:#3497ee;
@mixin opacity($value) {
    opacity: $value;
    filter: alpha(opacity=$value*100);
}

@mixin transition($obj, $time) {
    -webkit-transition: $obj $time;
    -moz-transition: $obj $time;
    -ms-transition: $obj $time;
    transition: $obj $time;
}

@mixin transform($value) {
    -webkit-transform: $value;
    -moz-transform: $value;
    -ms-transform: $value;
    transform: $value;
}

//$attr 属性  $val 值  $steps 每次减少的值
@mixin space($attr,$val,$steps:2) {
	#{$attr}:$val;
  @media only screen and (max-width: 1200px) {
  	#{$attr}:$val - $steps; 
  }
  @media only screen and (max-width: 992px) {
	#{$attr}:$val - $steps*2;
  }
  @media only screen and (max-width: 768px) {
  	#{$attr}:$val - $steps*3;
  }
  @media only screen and (max-width: 520px) {
  	#{$attr}:$val - $steps*4;
  }
  @media only screen and (max-width: 420px) {
  	#{$attr}:$val - $steps*5;
  }
}
//例子
.box{
	background-color:red;
	@include space(padding-top,24px);
	@include space(font-size,24px)
}