//文字显示行数隐藏=======================================================

 

@mixin lines($line:1){

 

    text-overflow: -o-ellipsis-lastline;

 

    overflow: hidden;

 

    text-overflow: ellipsis;

 

    display: -webkit-box;

 

    -webkit-line-clamp: $line;

 

    -webkit-box-orient: vertical;

 

}

 

//圆角=======================================================

 

@mixin radius($radius:5px){

 

    -moz-border-radius:$radius;

 

    -webkit-border-radius:$radius;

 

    -o-border-radius:$radius;

 

    -ms-border-radius:$radius;

 

    -khtml-border-radius:$radius;

 

    border-radius:$radius;

 

}

 

//边框=======================================================

 

@mixin border($path,$size: 1px,$type: solid,$color: #efefef){

 

    @if $path == all {

 

        border:$size $type $color;

 

    }@else{

 

        border-#{$path}:$size $type $color;

 

    }

 

}

 

//动画时间======================================================

 

@mixin antime($time:1s){

 

    transition: $time;

 

    -moz-transition: $time;

 

    -webkit-transition: $time;

 

    -o-transition: $time;

 

}

 

//阴影=======================================================

 

@mixin shadow($shadowx:15px,$shadowy:15px, $shadowz:15px, $shadowcl:#000){

 

    -webkit-box-shadow: $shadowx $shadowy $shadowz $shadowcl;  

 

    -moz-box-shadow: $shadowx $shadowy $shadowz $shadowcl;  

 

    box-shadow: $shadowx $shadowy $shadowz $shadowcl;

 

}

 

//按钮=======================================================

 

@mixin btn($type,$size: 1px,$btnline: solid,$bgcolor: #fff,$txtcolor: #333,$radius: 3px){

 

    @if $type == solidbtn { //实心按钮

 

        border:$size $btnline $bgcolor;

 

        background: $bgcolor;

 

        color: $txtcolor;

 

        border-radius: $radius;

 

        &:hover{

 

            background: lighten($bgcolor,10%);   //sass颜色函数 lighten

 

        }

 

        &:focus{

 

            outline: none !important;

 

        }

 

    }@else if $type == emptybtn{ //空心按钮

 

        border:$size $btnline $txtcolor;

 

        background: $bgcolor;

 

        color: $txtcolor;

 

        border-radius: $radius;

 

        &:hover{

 

            background: lighten($bgcolor,10%);   //sass颜色函数 lighten

 

        }

 

        &:focus{

 

            outline: none !important;

 

        }

 

    }

 

}

 

//链接======================================================

 

@mixin link($cl:#333,$hovercl:#666,$visited:#999){

 

    color: $cl;

 

    &:hover{

 

        color: $hovercl;

 

    }

 

    &:visited{

 

        color: $visited;

 

    }

 

}

 

//透明度=======================================================

 

@mixin opacity($opacity) {

 

  opacity: $opacity;

 

  $opacity-ie: $opacity * 100;

 

  filter: alpha(opacity=$opacity-ie); //IE8

 

} 

 

最好的学习教程就是去看官网以及 bootstrap