Sass mixin用于背景透明度回到IE8

Question

我是Sass的新手并且正在努力解决这个问题.我无法在两者中获得颜色hex(对于IE)和rgba.每一小段都令我感到沮丧,因为我还没有掌握语法,而Sass的谷歌搜索结果仍然很少.

这是混音:

@mixin transparent($hex, $a){
    /* for IEGR8 */
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$a}#{$hex},endColorstr=#{$a}#{$hex});
    zoom: 1;
    /* for modern browsers */
    background-color: rgba(#{$hex},.#{$a});
}

这@include transparent(#FFF,.4)应该产生以下良好的,浏览器兼容的透明代码:

background: transparent;         
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#40FFFFFF,endColorstr=#40FFFFFF);
zoom: 1;
background-color: rgba(100,100,100,.40);

几个小时后,我一直在注意以下事项:

• 该#要求#RGB格式.
• 在.需要RGBA阿尔法.

两者都需要包含在调用中rgba(),但是#不能包含在IE中,#AARRGGBB或者它看起来像#AA#RRGGBB和.不能包括IE或它拒绝#.AARRGGBB.

我错过了一个更简单的方法吗？这可以通过Sass字符串操作或Sass中的任何稍微聪明的色彩转换功能来完成,它已经为我处理了这个问题吗？

Muchas gracias.

Answer 1

@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  background-color: transparent;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
  zoom: 1;
}

注意:ie-hex-str仅在最新版本中可用,但不确定何时引入