Sass mixin для прозрачности фона обратно в IE8

Я новичок в Сассе и борюсь с этим. Я не могу получить цвет для рендеринга как в 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 alpha.

Оба должны быть включены для вызова rgba(), однако # не может быть включен для IE #AARRGGBB или он будет выглядеть как #AA#RRGGBB и. не может быть включен для IE или отклоняется #.AARRGGBB.

Я пропустил гораздо более простой способ сделать это? Можно ли это сделать с помощью строковой манипуляции Sass или любой слегка умной функции цветопередачи в Sass, которая уже обрабатывает это для меня?

Muchas gracias.

Ответы

Ответ 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 доступен только в последних версиях, не уверен, когда он был введен, хотя

Ответ 2

Я думаю, что столкнулся с подобной проблемой, когда хотел передать URL-адрес микшированию. Вместо того, чтобы отправлять только URL-адрес, я отправил весь параметр url в качестве параметра в mixin. Если вы понимаете, что я имею в виду?

Пример:

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

insted of:

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

Ответ 3

Это, вероятно, так же пуленепробиваемо, как вы получите без правильной прокладки.

Чтобы использовать ответ seutje, это позволяет использовать прозрачность ms-filter, если вы выполняете background-color в IE, но если вы знаете цвет элемента за элементом, вы хотите сделать прозрачным, вы можете использовать функцию "mix" 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% цвета непрозрачности обратно в шестнадцатеричный код, следовательно fade-in 100%.

Единственными браузерами без прозрачности цвета являются IE8 <= 8 и Opera <= 9.6, а IE 8 имеет фильтры, поэтому это помогает для цветов, отличных от background-color. Принцип заключается в том, что вы смешиваете цвета фона и переднего плана вместе в плоский гекс.

ie-hex-str теперь как год назад, поэтому вы обязательно получите его.