Sass mixin使背景透明回到IE8

老丝2020-03-23

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

这是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 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中任何稍微聪明的颜色转换功能（已经为我完成此操作）完成此操作吗？

2020/03/23 21:52:12

我想将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)
}

樱2020/03/23 21:52:12

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer