特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
《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工具中就收录过这样的工具:
不过今天我们不是探讨用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效果,三角向上
.toolti
如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-triangle-mixin.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!