SASS基础——SASS Triangle Mixin

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

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

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

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

制作思路

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

SASS基础——SASS Triangle Mixin

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

  • 位置:也就是三角的方向,主要包括向上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会使用其制作折边效果。

SASS基础——SASS Triangle Mixin

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

//HTML结构

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

直接将Bourbontrangle拿来使用。在这里我们不考虑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效果,三角向上
.toolti
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-triangle-mixin.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部