一些sass下的@mixin自定义样式

常用reset的一些基础样式建议跟reset放到一起引用，加上Sass下@mixin的一些基础样式，这样就可以减少时间写浏览器兼容前缀（vendor prefix）代码,自定义定制了常用的一些样式，小三角形，按钮，单行与多行的省略，背景，伸缩盒等，不使用@include引用不会进行编译的。
1，比如在某个标签想弄个红色向上的三角形 可以 .div{@include triangle(bottom,5px,red)};即可。
2，比如在某个标签想单行省略div{@include ellipsis},多行（3行省略，改变括号中数字）div{@include ellipsis（3）}

// triangle 三角箭头
// 可采用空元素或伪元素生成，具体定位这里不涉及
%triangle-basic {
    position:absolute;
    content: "";
    height: 0;
    width: 0;
    line-height: 0;
    overflow: hidden;
}
@mixin triangle($direction: top, $borderWidth: 6px, $borderColor: #ccc) {
    @extend %triangle-basic;
    @if $direction == top {
        border-top: $borderWidth solid $borderColor;
        border-left: $borderWidth solid transparent;
        border-right: $borderWidth solid transparent;
    }
    @else if $direction == right {
        border-right: $borderWidth solid $borderColor;
        border-top: $borderWidth solid transparent;
        border-bottom: $borderWidth solid transparent;
    }
    @else if $direction == bottom {
        border-bottom: $borderWidth solid $borderColor;
        border-left: $borderWidth solid transparent;
        border-right: $borderWidth solid transparent;
    }
    @else if $direction == left {
        border-left: $borderWidth solid $borderColor;
        border-top: $borderWidth solid transparent;
        border-bottom: $borderWidth solid transparent;
    }
}
//设置按钮
@mixin btn($fontSize: 16px,$color: #fff,$bgColor: #ec584e,$radius:5px){
    position: relative;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: $fontSize;
    text-align: center;
    line-height: 2.33333333;
    border-radius: 5px;
    overflow: hidden;
    color:$color;
    background: $bgColor;
}
//单行隐藏
@mixin ellipsis($lines: 1) {
    @if $lines != 1 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    }@else {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

// transition
@mixin transition($property:all,$duration:0.5s,$timing:ease){
    -webkit-transition:$property $duration $timing;
    -moz-transition:$property $duration $timing;
    -ms-transition:$property $duration $timing;
    -o-transition:$property $duration $timing;
    transition:$property $duration $timing;
}

//背景
@mixin bgcolor($opacity:30){
  background:rgba(0,0,0,$opacity/100);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#35000000', endColorstr='#35000000');
}
//伸缩盒
@mixin flexbox{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex; 
}
@mixin flex($count:1){
    -webkit-box-flex: $count;
    -moz-box-flex: $count; 
    -webkit-flex: $count; 
    -ms-flex: $count;
    flex: $count;
}
@mixin boxshadow($hshadow:0, $vshadow:0, $blur:10px, $spread:10px, $color:#000, $inset:inset ){
    @if $inset != inset {
        -webkit-box-shadow: $hshadow $vshadow $blur $spread $color $inset;
        -moz-box-shadow: $hshadow $vshadow $blur $spread $color $inset;
        -ms-box-shadow: $hshadow $vshadow $blur $spread $color $inset;
        -o-box-shadow: $hshadow $vshadow $blur $spread $color $inset;
        box-shadow: $hshadow $vshadow $blur $spread $color $inset;
        color:red;
    }@else{
        -webkit-box-shadow: $hshadow $vshadow $blur $spread $color;
        -moz-box-shadow: $hshadow $vshadow $blur $spread $color;
        -ms-box-shadow: $hshadow $vshadow $blur $spread $color;
        -o-box-shadow: $hshadow $vshadow $blur $spread $color;
        box-shadow: $hshadow $vshadow $blur $spread $color;
    }
}