sass箭头符号的混合封装

工作中我们可能经常会用到箭头，回退按钮，页面指向，向下或者向上的标识，这些可以用边框遮盖的效果来实现，可以将其作为基础封装在base.scss中。

// 箭头混合

@mixin arrow($w: 10px, $color: #000, $dir: top) {

// 兼容行内和块

width: 0;

font-size: 0;

//多宽的三角

border: $w solid transparent;

//朝向和颜色

border-#{$dir}-color: $color;

}

豆瓣的这个箭头的实现就是两个边框的遮盖效果，可以这样使用

.arrow{

@include arrow(10px ,#ccc,left);

position: relative;

left: -10px;

top: 0;

.white{

position: absolute;

left: -13px;

top: -10px;

border-left-color: #fff;

}

}

内部的white类应用了外层箭头混合，并更改了颜色为白色，这样两个边框进行遮盖，将其位置进行微调，就可以达到上面的效果。