Sass中半透明颜色的Mixins

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

The Sass Way上看到一篇John W. Long写的《Mixins for Semi-Transparent Colors》文章。文章中详细的介绍了如何使用Sass来定义一个半透明颜色的mixins,觉得很有意思,认真学习之后,结合CSS中的半透明,以及Sass中的半透明做了一点总结,与大家分享。

CSS中透明实现

回想CSS中实现透明的属性主要是opacity,这个属性可以控制元素的透明度,包括其后代元素都会受到一定的影响。

opacity: .5;
filter:alpha(opaity=50);

这或许不是我们想要的效果,因为opacity属性不但是控制了颜色,而且还控制了所有元素的的透明度,是个非常BT的东东。不早期常用于制作浮层背景透明效果。

除了opacity属性之外,在CSS中控制颜色的透明的还有一个transparent值,他可以让颜色完全透明化:

color: transparent;
border-color: transparent;
background-color: transparent;

如此一来,始终无法帮助我们实现需要的半透明效果。

CSS3中半透明实现

随着CSS3的出现,实现颜色的半透明效果就变得轻松多了,其中CSS3为颜色的半透明增加了rgbahsla属性。通过这两个属性可以对任何颜色控制他的半透明效果。

color: rgba(0,0,0,.3);
border-color: hsla(20,3%,90%,.3);

Sass中颜色半透明实现

Sass给我们提供了很多有意思的颜色函数功能。可以在其他颜色的基础上计算出一个新的颜色。常见的就是使用darken()saturate()adjust-color()函数来调整颜色,最常见使用的地方就是用在按钮上,用来突出按钮的颜色和阴影。

很多Web设计师都比较喜欢使用半透明的颜色,这样可以让设计更好的容入到元素中。在Sass中使用rgba()函数就变得更加轻松与简单:

.button {
    background-color: rgba(black,.5);
}

大家都知道,CSS3中的rgba是具有四个参数的:red红色、green绿色、blue蓝色和alpha通道。而Sass中的rgba()函数仅接受两个参数,第一个参数是指定的颜色,第二个参数像CSS3中rgba属性中的alpha通道,用来控制颜色的透明度。但是Sass中rgba()函数编译出的也是使用CSS3的rgba格式,具有四个参数:

$ sass -i
>> rgba(black,.5)
rgba(0, 0, 0, 0.5)

不过使用rgba具有一定的代价,在早期的IE浏览器不识别这个属性,详情请点击这里。当浏览器访问到这个属性时,不识别的浏览器会直接忽略他。这意味着不支持的浏览器会完全透明,不过有一个方法可以避免这类现象,就是在rgba格式的前面先写一个所有浏览器都支持的颜色格式:

.button {
    background-color: #7f7f7f;
    background-color: rgba(black,.5);
}

如果你有一个颜色选择

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/mixins-for-semi-transparent-colors.html

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

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