《SASS基础——十个常见的Mixins》一文中介绍了SASS中常见的十个Mixins，当然这些Mixins其实对应的就是CSS中常用到的公共样式，例如：设置行内块inline-block，水平居中horizontal-center，浮动pull-left，pull-right以及重置浮动reset-float，清除浮动clearfix以及图片替换文本和隐藏元素等等。事实上，SASS的Mixins不仅仅只做这些简单的工作，只要你原意去想，你会发现，你可以定制很多你熟悉的功能，甚至可以将某些在线样式生成器，定义成一个Mixins，实现所需效果。

今天我们就来看一个简单的Mixin，这个Mixin主要是用来实现三角的效果。说起三角，制作方法很多，此处不做过多探讨，如果你感兴趣可以阅读一下下面的文章：

• 纯CSS制作的图形效果——@W3cplus
• Border解决文案——【@结一】
• CSS quiz: 带边 border 的三角形——@Sofish
• CSS Border使用小分享——@乔花
• 用css的border属性实现三角——@愚人码头
• 小tip: 某简单的字符重叠与图形生成——@张鑫旭
• CSS3 @font-face实现颜色大小可控的三角效果——@张鑫旭
• CSS border三角、圆角图形生成技术简介——@张鑫旭
• 告别图片—使用字符实现兼容性的圆角尖角效果beta版——@张鑫旭

其实，如果你讨厌写代码的话，你也可以使用一些在线生成器来制作，其中在CSS3工具中就收录过这样的工具：

• 边框border制作三角的小工具 v2.0——@林小志
• CSS ARROW PLEASE!——@Simon Højberg

不过今天我们不是探讨用css怎么写的原理，或者说怎么使用工具。我们应该回到今天的主题，使用SASS来写一个三角的Mixins。

制作思路

三角Mixin的思路主要来自于CSS制作三角工具中（如上面所列的链接）。我们先来看一张截图：

从上图中，可以看出，整个工具中提供了五个参数给我们做选择：

• 位置：也就是三角的方向，主要包括向上top，向右right，向下bottom和向左left;
• 大小：主要用来设置三角形大小；
• 颜色：主要用来设置三角颜色
• 边框宽度：这个是用来实现带有边框的三角效果
• 边框颜色：用来设置带有边框的三角的边框色

而整个实现原理使用上border来制作三角，至于如何用border制作三角，大家请参阅文章开头所列的相关教程。这里需要特别注意的一点：上图使用的是CSS3的伪元素:before和:after来控制三角部分。当你的三角是纯色（也就是说不带边框的三角效果），那么可以只使用一个伪类;当你的三角带有边框，那么需要两个伪类都同时应用。由于IE低版本不支持伪类的使用，你需要在元素内添加两个标签来代替伪类。

回到SASS中，我们要定义一个mixin，也应该围绕工具上所展示的几个参数来做思考。将工具中所列的选项做为一个参数传入进去。例如，我们将三角的mixin命名为：triangle，根据上面所述，需要制作三角需要的参数：大小$size，颜色$color，位置（方向）$direction，边框大小$borderSize和边框颜色$borderColor。那么我们能这样定义吗？或者说，在@mixin triangle中需要定义这么多参数吗？大家先别急于去回答，把这个问题的答案放到最后来回答，暂时你只要心中有这样的概念存在就可以了。

典型的SASS Triangle Mixin

使用SASS定制@mixin triangle，我想在网上应该会有成熟的实现方法，于是打开[GG][http://www.google.com]输入关键词sass triangle mixin，还真是找出一大片。打开了一些相关链接，经过一段阅读后，我筛选了几个经典的案例，接下来，我们来看看这几个经典的用例。

Bourbon的Triangle Mixin

Bourbon是一个优秀的SASS库，里面涵盖了很多个经典的Mixins，其中就有一个关于三角形的Mixin——triangle。Bourbon使用的方法就是CSS中很简单的一种，通过border技巧来制作三角。我们先来看看其实现三角的Mixin是怎么写的：

@mixin triangle ($size, $color, $direction) {
  height: 0;
  width: 0;

  //三角向上、向下、向右和向左时，设置边框样式 
  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
    border-color: transparent;
    border-style: solid;
    border-width: $size / 2;

    //三角向上时，底部边框颜色为$color
    @if $direction == up {
      border-bottom-color: $color;

    //三角向右时，左边边框颜色为$color
    } @else if $direction == right {
      border-left-color:   $color;

    //三你向下时，顶部边框颜色为$color
    } @else if $direction == down {
      border-top-color:    $color;

    //三角向左时，右边框颜色为$color
    } @else if $direction == left {
      border-right-color:  $color;
    }
  }

  //当三角为左上、右上直角三角形时       
  @else if ($direction == up-right) or ($direction == up-left) {
    border-top: $size solid $color;//顶边边框样式

    //当三角为右上直角三角形时，设置左边边框为透明
    @if $direction == up-right {
      border-left:  $size solid transparent;

    //当三角为左上直角三角形时，设置右边边框为透明
    } @else if $direction == up-left {
      border-right: $size solid transparent;
    }
  }

  //当三角为右下、左下直角三角形时
  @else if ($direction == down-right) or ($direction == down-left) {
    border-bottom: $size solid $color;//底边边框样式

    //当三角为右下直角三角形时，设置左边边框为透明
    @if $direction == down-right {
      border-left:  $size solid transparent;

    //当三你为左下直角三角形时，设置右边边框为透明
    } @else if $direction == down-left {
      border-right: $size solid transparent;
    }
  }
}

在Bourbon中，给@mixin triangle传递了三个参数：$size,$color和$direction，分别用来控制三角的大小、颜色和位置（方向）。并且根据三角的形状将三角分为两大类，其中一类就是类似于等边三角形的，另外一种就是直角三角形。当然后者这种三角在实际应用中并不太常见，但有时也是需要使用的，比如说制作Ribbon会使用其制作折边效果。

如果要在实际中使用这个triangle，我们需要配合伪类:before和:after或者通过添加标签。我们来看一个简单的实例。

//HTML结构

<div class="tooltip">Hello SASS!</div>
<div class="tooltip-border">Hello SASS!</div>
<div class="ribbons">Hello SASS!</div>

直接将Bourbon的trangle拿来使用。在这里我们不考虑IE下的兼容，所以在示例中采用:before和:after实现。

//声明变量
$bgColor: #0186ba; //设置背景色
$color: #fff; //设置文本色
$font-size: 16px; //设置字号
$unit: 4px; //设置长度变量
$borderColor: #223678; //设置边框色

//因为三个div将使用相同的基本样式，所以使用`%placeholders`将公用样式抽出
%boxStyle {
  display: inline-block;
  margin: $unit * 5;
  padding: $unit * 2;
  background: $bgColor;
  color: $color;
  position: relative;//设置相对定位，做为三角定位的参考物
}
//伪类要起作用，必须要使用`content:""`
%content {
  content:"";
  display: block;
  position: absolute;
}

//示例一：纯色的tooltip效果，三角向上
.