Sass mixin 将背景透明度恢复到 IE8

Question

我是 Sass 新手，并为此苦苦挣扎。我无法在 hex（对于 IE）和 rgba 中渲染颜色。每一个小片段都让我感到沮丧，因为我还没有掌握语法，而且 Sass 的 Google 结果仍然很少。

这是 mixin：

@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透明(#FFF,.4) 应该生成下面漂亮的、与浏览器兼容的透明代码：

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

我已经对以下内容感兴趣了几个小时：

• #。
• rgba alpha 所需的 .。

调用 rgba() 时需要包含两者，但 IE #AARRGGBB 中不能包含 #，否则看起来像 #AA #RRGGBB，以及 .无法包含在 IE 中，或者拒绝 #.AARRGGBB。

我是否缺少一种更简单的方法来做到这一点？这可以通过 Sass 字符串操作或 Sass 中任何稍微聪明的颜色转换函数来完成吗？它已经为我处理了这个问题？

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 仅在最新版本中可用，但不确定何时引入

Answer 2

我想当我想将 url 传递给 mixin 时遇到了类似的问题。我没有只发送 url，而是将整个 url 参数作为参数发送给 mixin。如果你明白我的意思吗？

示例：

@mixin bg($url)
  background: #000 $url repeat-x

插入：

@mixin bg($url)
  background: #000 url($url) repeat-x

另外，这可能不适合您的应用程序，但我通常使用不透明度来解决该问题：

@mixin transparent_bg($hex, $a){
  /* for IEGR8 */
  filter:alpha(opacity=$a)
  zoom: 1;

  /* for modern browsers */
  background-color: $hex;
  opacity: ($a*10)
}

Answer 3

如果没有适当的垫片，这可能是防弹的。

为了构建 seutje 的答案，如果您在 IE 上执行 background-color ，则可以使用 ms-filter 透明度，但是如果如果您知道要使其透明的元素后面的元素的颜色，则可以使用 Sass 的“混合”功能来混合两种颜色并获得假透明度 - 对于任何类型的颜色。这意味着边框和文本以及所有这些令人兴奋的东西。它仍然是手动后备，但它会给您准确您尝试用实心十六进制模拟的颜色。

SCSS：

@mixin alpha-color($foreground-color, $property: 'background-color', $background-context-color: #fff) {
    #{$property}: mix( 
        fade-in($foreground-color, 1), 
        $background-context-color, 
        percentage(opacity($foreground-color)) 
    ); // Browsers without color opacity
    #{$property}: $foreground-color; // Decent browsers
    @if $property == 'background-color' {
        .lt-ie9 & { // IE8 has background filters; use them instead
            #{$property}: transparent;
            $ie-hex: ie-hex-str($foreground-color);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex},endColorstr=#{$ie-hex});
            zoom: 1;
        }
    }
}

要在蓝色背景上获得 border-color: rgba(255, 0, 0, 0.5)，您可以这样使用它：

.blue-container {
    $color-bg: rgb(0,0,255);
    background-color: $color-bg;
    .transparent-red-element {
        @include alpha-color(rgba(255, 0, 0, .65), border-color, $color-bg);
    }
}

Sass 自动将 100% 不透明度颜色转回十六进制代码，因此淡入为100%。

唯一没有颜色不透明度的浏览器是 IE8 <=8 和 Opera <=9.6 以及 IE 8有过滤器，因此这只对 background-color 以外的颜色有帮助。原理是将背景颜色和前景色混合在一起形成一个扁平的六角形。

ie-hex-str 现在已经一岁了所以你一定会拥有它。