scss - sass-- watch

Sass mixin para transparencia de fondo a IE8

Question

Soy nuevo en Sass y estoy luchando con esto. No puedo obtener el color para renderizar en ambos hex (para IE) y rgba . Cada pequeña pieza me frustra porque aún no domino la sintaxis, y los resultados de Google para Sass aún son escasos.

Aquí está el 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});
}

De modo que @include transparent(#FFF,.4) debería producir el código transparente compatible con el navegador que se muestra a continuación:

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

He estado comentando lo siguiente por un par de horas:

• El # requerido para el formato #RGB.
• El . requerido para rgba alpha.

Ambos deben estar incluidos para la llamada a rgba() , sin embargo, el # no se puede incluir para IE #AARRGGBB o se verá como #AA#RRGGBB , y el. no se puede incluir para IE o rechaza #.AARRGGBB .

¿Me estoy perdiendo una manera mucho más simple de hacer esto? ¿Se puede hacer esto con la manipulación de cadenas Sass o cualquier función de fundición de color ligeramente inteligente en Sass que ya maneja esto para mí?

Muchas gracias.

Answer 1

Creo que encontré un problema similar cuando quería pasarle una URL al mixin. En lugar de enviar solo la url, envié el parámetro url completo como parámetro a la mezcla. Si entiendes lo que quiero decir?

ejemplo:

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

inscribed de:

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

Además, es posible que esto no sea el adecuado para su aplicación, pero generalmente trabajo con ese problema usando la opacidad:

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

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

Answer 2

@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;
}

NOTA : ie-hex-str solo está disponible en versiones recientes, no estoy seguro de cuándo se introdujo

Answer 3

Esto probablemente sea tan a prueba de balas como obtendrás sin una cuña adecuada.

Para construir sobre la respuesta de Seutje , esto le permite usar la transparencia de ms-filter si está haciendo background-color en IE, pero si usted conoce el color del elemento detrás del elemento que desea hacer transparente, puede usar Función de "mezcla" de Sass para mezclar los dos colores y obtener transparencia falsa, para cualquier tipo de color. Eso significa fronteras y texto y todo lo que jive. Sigue siendo un retroceso manual, pero te dará el color exacto que intentas simular con un hexágono sólido.

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;
        }
    }
}

Para obtener border-color: rgba(255, 0, 0, 0.5) sobre un fondo azul, lo usaría como:

.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 convierte automáticamente el 100% de los colores de opacidad en un código hexadecimal, de ahí el fade-in del 100%.

Los únicos navegadores sin opacidad de color son IE8 <= 8 y Opera <= 9.6 , e IE 8 tiene filtros, por lo que esto solo ayuda con los colores que no sean de background-color . El principio es que se mezclan los colores de fondo y primer plano en un hexágono plano.

ie-hex-str tiene ahora un año, así que definitivamente lo tendrás.