不仅仅只做这些简单的工作，只要你原意去想，你会发现，你可以定制很多你熟悉的功能，甚至可以将某些在线样式生成器，定义成一个 今天我们就来看一个简单的Mixin，这个Mixin主要是用来实现三角的效果。说起三角，制作方法很多，此处不做过多探讨，如果你感兴趣可以阅读一下下面的文章： 其实，如果你讨厌写代码的话，你也可以使用一些在线生成器来制作，其中在CSS3工具中就收录过这样的工具： 不过今天我们不是探讨用css怎么写的原理，或者说怎么使用工具。我们应该回到今天的主题，使用SASS来写一个三角的Mixins。 三角Mixin的思主要来自于CSS制作三角工具中（如所列的链接）。我们先来看一张截图：
而整个实现原理使用上border来制作三角，至于如何用border制作三角，大家请文章开头所列的相关教程。这里需要特别注意的一点：上图使用的是CSS3的伪元素:before和:after来控制三角部分。当你的三角是纯色（也就是说不带边框的三角效果），那么可以只使用一个伪类;当你的三角带有边框，那么需要两个伪类都同时应用。由于IE低版本不支持伪类的使用，你需要在元素内添加两个标签来代替伪类。 回到SASS中，我们要定义一个mixin，也应该围绕工具上所展示的几个参数来做思考。将工具中所列的选项做为一个参数传入进去。例如，我们将三角的mixin命名为：，根据所述，需要制作三角需要的参数：大小$size，颜色$color，（方向）$direction，边框大小$borderSize和边框颜色$borderColor。那么我们能这样定义吗？或者说，在@mixin 中需要定义这么多参数吗？大家先别急于去回答，把这个问题的答案放到最后来回答，暂时你只要心中有这样的概念存在就可以了。 使用SASS定制@mixin ，我想在网上应该会有成熟的实现方法，于是打开[GG][输入关键词sass mixin，还真是找出一。打开了一些相关链接，经过一段阅读后，我筛选了几个经典的案例，接下来，我们来看看这几个经典的用例。 Bourbon是一个优秀的SASS库，里面涵盖了很多个经典的Mixins，其中就有一个关于三角形的Mixin——。Bourbon使用的方法就是CSS中很简单的一种，通过border技巧来制作三角。我们先来看看其实现三角的Mixin是怎么写的： 在Bourbon中，给@mixin 传递了三个参数：$size,$color和$direction，分别用来控制三角的大小、颜色和（方向）。并且根据三角的形状将三角分为两大类，其中一类就是类似于等边三角形的，另外一种就是直角三角形。当然后者这种三角在实际应用中并不太常见，但有时也是需要使用的，比如说制作Ribbon会使用其制作折边效果。
如果要在实际中使用这个，我们需要配合伪类:before和:after或者通过添加标签。我们来看一个简单的实例。 直接将Bourbontrangle拿来使用。在这里我们不考虑IE下的兼容，所以在示例中采用:before和:after实现。
效果出来了，基本上满足了大家制作三角的需求，但细看编译出来的CSS代码还是有很多相同的没有合并起来，这对于有代码洁癖的同学来说，是件很讨厌的事情。这也是SASS不被很多同学喜欢的原因之一。其实出现这个现象，并不是SASS惹的祸，而是我们自己人为造成的，此处咱暂且搁置不管。 另外，有一点需要大家注意的是如果你的效果要支持IE低版本，我们的结构是要做一点的调整的。在容器内添加一个或两个空标签，同时用类名来替代伪类。 在sassCore中的Mixins中同样为三角定义了一个@mixin 。在这个中只定义了常见的四种三角，也就是向上top，向右right，向下bottom和向左left。与Bourbon的@mixin 相比，少了另外四种风格。相对而言要简单一点，但功能也就少了一点。 使用方法和Bourbon一样，需要先在元素中定义一个相对定位relative做为参考物，然后通过伪元素:after和:before或者空标签（如span）使用@include 调用，同时需要在里面设置绝对定位absolute。根据自己的所需，定义top，right，bottom和left的值。
Miguel Mota在他的Blog中发表了一篇有关于SASS写的——《Sass Triangles》。这篇文章介绍的制作有其独到的地方（我个人认为）。——他可以通过mixin来控制三角是不是透明，是否内嵌在元素内。 Miguolmotal的和前面介绍的两个在参数定义之时就有明显的区别。除了定义了$size,$color，direction三个参数之外还追加了另外两个参数$trim和$transparent布尔值，用来判断三角是否截取一边的宽度（也就是其中一个方向的border宽度为0），是否透明。我们一起来看其定义的代码：
这个最大的功能就是在传参数时，设置了两下值$trim和$transparent用来判断三角为外凸还是内嵌。这种方法用来实现彩带效果会非常方便。当然有时为了实现三角透明，看到背景，功能就很方便了。Miguel Mota在他的Blog中就使用了三角透明的效果，不过实现这个效果可不只是轻意的说其中一边为透明简单，他还要配合其他的CSS样式才可以完美的实现，感兴趣的同学不仿看看：
经过前面三个优秀的学习，大家都对Sass实现三角的mixin有所了解，而且每种方法都有其其同的特点，不管是好的方面还是不足之处。好的咱就不说了，来看看他们一起共有的不足之处： 看到的归纳，大家有没有尝试去改变他们，或者说将其三者的优势集为一身。如果没有，我觉得那我们的学习也就是一个依葫芦画瓢，提高并不会很高。要是你有想过，你会怎么来改变呢？下面说说我自己的思考： 我把自己整的三角命名为W3cplus ，不为别的，只是为了能与前面三前方法有所区别。如果你感兴趣，那么我们一起来动手一试试吧。 如此看来定义的@mixin 从代码层面上复杂的多了，但在实际使用，也非常的简单：
不过有一个地方，生成出来的代码不太理想。在透明三角的时候，会有重复的代码出现，我们使用firebug查看，一看便知：
可以说这是一个很不足的地方，虽然实现我们需要的效果，但对于有代码洁癖的同学来说，是无法接受的。我尝试来修复这个问题，但一直受限与定位和三角生成代码重复的取舍。未能找到根本性的解决文案。希望其他的同学，有方法能解决这样的问题。 除了DEMO展示的效果，我们经常还会碰到只有边框的tooltip效果，正如CSS Arrow Please所展示的效果，其实使用这个也可以很轻松的实现。我们一起来看一个简单的实例吧。
当然，如果你要兼容IE低版本，:after和:before是无法帮你实现，此时你需要在元素中添加两个空标签来模仿。 我在重新思考，实现这个功能，我们是否可以定义一个function呢？如果您有好的想法，希望能一起分享。如果大家对这个三角有不同的看法，欢迎在下面的评论中给我留言。(^_^)。
W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文；其文章范围广泛，主要以CSS3、HTML5、Sass、Mobile和各类DEMO为主。 W3cplus具有一支强大的团队，提供长期的前端项目外包，Drupal建站，Drupal主题制作服务，以及提供企业广告展示与招聘发布，有需要的请联系：，E-mail: 常用昵称“大漠”，W3CPlus创始人，目前就职于淘宝。中国Drupal社区核心之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3、Sass和Mobile的研究，是国内最早研究和使用CSS3和Sass技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。 本书是国内著名的Web前端专家历时2载的心血之作，根据最新的CSS3撰写，融入了作者在CSS领域多年的使用经验，旨在将本书打造成为CSS3领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。 本书理论知识系统全面，详细了选择器、伸缩布局盒模型、渐变、过渡、动画等主题下涵盖的所有CSS3新特性。
|
