base_haley.scss（最基础的base级scss样式）

//display
.db{display: block}
.di{display: inline}
.dib{display: inline-block}
.hide{display: none;}
.show{display:block;}
.tdn{text-decoration: none;}

//text
.tl{text-align: left}
.tr{text-align: right}
.tc{text-align: center}
.tj{text-align: justify}
.tin2{text-indent: 2em;}

.vm{vertical-align: middle;}

//margin padding
@mixin m($a){margin: $a;}
@mixin mt($a){margin-top: $a;}
@mixin ml($a){margin-left: $a;}
@mixin mr($a){margin-right: $a;}
@mixin mb($a){margin-bottom: $a;}
@mixin p($a){padding: $a;}
@mixin pt($a){padding-top: $a;}
@mixin pl($a){padding-left: $a;}
@mixin pr($a){padding-right: $a;}
@mixin pb($a){padding-bottom: $a;}

.m0{@include m(0)}
.mt0{@include mt(0)}
.mb0{@include mb(0)}
.mr0{@include mr(0)}
.ml0{@include ml(0)}
.p0{@include p(0)}
.pt0{@include pt(0)}
.pb0{@include pb(0)}
.pr0{@include pr(0)}
.pl0{@include pl(0)}

@for $i from 5 to 100 {
  @if($i%10==0){
    .mt#{$i} {
      @include mt($i+px);
    }
  }

}
//height line-height
@mixin h($h){height:$h}
@mixin lh($lh){line-height:$lh}
@mixin w($w){width:$w}
//fz
@mixin fz($fz){font-size: $fz;}

//color
@mixin c($c){color:$c}

//border
@mixin b($c:#f00,$w:1px,$s:solid) {border:$w $s $c}
@mixin bb($c:#f00,$w:1px,$s:solid){border-bottom:$w $s $c}
@mixin bt($c:#f00,$w:1px,$s:solid){border-top:$w $s $c}
@mixin bl($c:#f00,$w:1px,$s:solid){border-left:$w $s $c}
@mixin br($c:#f00,$w:1px,$s:solid){border-right:$w $s $c}

//float
@mixin floatSide($side,$value: 10px) {
  float: $side;
  margin-#{$side}: $value;
}
// rounded
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
@mixin borderR($r:50%){
  -webkit-border-radius: $r;
  -moz-border-radius: $r;
  border-radius: $r;
}
/*
arrow(direction,
size,
color);
*/
@mixin arrow($direction,
$size,
$color) {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: $size;
  cursor: pointer;
  @if $direction == top {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $color transparent;
    border-top: none;
  }
  @else if $direction == bottom {
    border-style: solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
    border-bottom: none;
  }
  @else if $direction == right {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $color;
    border-right: none;
  }
  @else if $direction == left {
    border-style: dashed solid dashed dashed;
    border-color: transparent $color transparent transparent;
    border-left: none;
  }
}
/* icon
*/
$arr:home, about, product, contact ,joinus;
@each $member in $arr {
  .#{$member} {
    background-image: url("/image/ico-#{$member}.jpg");
  }
}
/*!
 top right bottom left
*/
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

/*!
media query
*/
$breakpoints: (
        'sm': 'only screen and  (min-width: 480px)',
        'md': 'only screen and ( min-width: 768px)',
        'lg': 'only screen and ( min-width: 992px)',
        'lg13': 'only screen and ( min-width: 1366px)',
        'lg14': 'only screen and ( min-width: 1440px)',
        'lg19': 'only screen and ( min-width: 1920px)'
) !default;

@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);

  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }

  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
    @content;
  }
}

//用法
.foo {
  @include respond-to('sm') {
    padding-left: 20px;
    padding-right: 20px;
  }
}
//产出
@media only screen and (min-width: 480px) {
  .foo {
    padding-left: 20px;
    padding-right: 20px;
  }
}