sass中常用mixin

//设置字体大小
@mixin font($s:14px,$h:1.5,$f:microsoft yahei){
    font:$s/#{$h} $f;
}

//参数(方向，大小，颜色),默认:向下,10px,红色
%arrow{
    width:0;
    height:0;
    line-height:0;
    font-size: 0;
    overflow:hidden;
    display: inline-block;
}
@mixin arrow($dir:bottom,$size:10px,$color:red){
    @extend %arrow;
    border:#{$size} dotted transparent;
    @if $dir=="top"{
        border-bottom:#{$size} dotted #{$color}; 
        border-top:0 none;
    }@else if $dir=="right"{
        border-left:#{$size} dotted #{$color}; 
        border-right:0 none;
    }
    @else if $dir=="bottom"{
        border-top:#{$size} dotted #{$color}; 
        border-bottom:0 none;
    }
    @else if $dir=="left"{
        border-right:#{$size} dotted #{$color}; 
        border-left:0 none;
    }
}

.arrow-top{
    @include arrow(top);
}
.arrow-right{
    @include arrow(right);
}
.arrow-bottom{
    @include arrow;
}
.arrow-left{
    @include arrow(left);
}

 

转载于:https://my.oschina.net/u/3147332/blog/807103