sass封装常见的@mixin

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/web_zhouliang/article/details/81109480

1.常用三角封装

@mixin triangle($direction, $size, $borderColor ) { content:""; height: 0; width: 0; @if $direction == top { border-bottom:$size solid $borderColor; border-left:$size dashed transparent; border-right:$size dashed transparent; } @else if $direction == right { border-left:$size solid $borderColor; border-top:$size dashed transparent; border-bottom:$size dashed transparent; } @else if $direction == bottom { border-top:$size solid $borderColor; border-left:$size dashed transparent; border-right:$size dashed transparent; } @else if $direction == left { border-right:$size solid $borderColor; border-top:$size dashed transparent; border-bottom:$size dashed transparent; } }