Sass中通过mixin封装透明背景模块

May 01, 2012

...

之前讲到过CSS实现背景透明完美解决方案
在Sass里可以通过mixin将其封装起来。

先回顾一下

/* 白色背景,透明度0.6 */ .alpha60 { background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.6); background: transparent\9; zoom: 1; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)"; }

分析

需要做的工作有:

  • 颜色和透明值应该通过参数传入
  • 需要能计算出rgba值:rgb(255, 255, 255)
  • 需要计算出IE下的值#99ffffff
  • 封装成minix模块,以便调用

过程

Sass的文档不全,为了查找一些计算函数,我只好去源码里找。
开始想寻求的是一个转十六进制的方法,结果发现ie_hex_str已经实现了。
在这里贴段里面的实现代码,来看看Sass的计算功能:

# Sass alpha = (color.alpha * 255).round.to_s(16).rjust(2, '0') # 等价于JS中的: Math.round(0.6 * 255).toString(16);

最后的rjust方法,应该是空位补零。

非常有用的两个页面: 函数源码在线调试Sass

总结

最终代码如下:

@mixin better_transparentize($color, $alpha) $c: rgba($color, $alpha) $ie_c: ie_hex_str($c) background: rgba($color, 1) background: $c background: transparent\9 zoom: 1 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c}) -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})"

然后在需要的地方直接引用即可,如:

.box @include better_transparentize(white, .8)