Sass - Convertendo Hex para RGBa para obter uma opacidade de fundo

213

Eu tenho o seguinte Sass mixin, que é uma modificação meia completa de um exemplo de RGBa :

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
}

Apliquei $opacityok, mas agora estou preso à $colorpeça. As cores que enviarei para o mixin serão HEX e não RGB.

Meu exemplo de uso será:

element {
    @include background-opacity(#333, .5);
}

Como posso usar valores HEX dentro deste mixin?

— Rick Donohoe
fonte

414

A função rgba () pode aceitar uma única cor hexadecimal e valores decimais RGB. Por exemplo, isso funcionaria perfeitamente:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

Porém, se você precisar dividir a cor hexadecimal em componentes RGB, use as funções vermelho () , verde () e azul () para fazer isso:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

— tremonha
fonte

Eu juro que tentei isso E as funções r, b, g e não funcionaram. Eu estava usando cores dinâmicas de um back-end do Drupal, o que pode ter quebrado alguma coisa. Ainda assim, ordenados no final e a resposta que eu encontrei depois de mais pesquisas +1

— Rick Donohoe

1

MAS, qual é o equivalente hexadecimal de # ($ color + $ opacidade)? - isso pode ser útil. factível?

— somedirection

2

Que eu saiba, o RGBA adiciona opacidade , o que significa que você pode ver os elementos por trás dele. Com o padrão hex, você não pode fazer isso.

— Richard Peck

Obrigado. Nunca teria pensado em tentar hex em rgb a!

— precisa saber é o seguinte

2

Melhor usar rgba($color, $alpha)como rgba(#000000, 0.6)o resultado é o mesmo e não há necessidade de reinventar a roda. ;)

— lbartolic

118

Existe um mixin interno: transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

A quantidade deve estar entre 0 e 1;

Documentação oficial do Sass (Módulo: Sass :: Script :: Functions)

— user3631047
fonte

1

Eu gosto disso! Ótimo para implementação de navegador moderno.

— Mike Kormendy

16

como uma nota lateral: o $ montante é quanto vai subtrair, e não o valor que deseja set

— MMachinegun

3

Funcionou muito bem, exceto que a quantidade parece ser o significado inverso que você deseja torná-lo 90%transparente para obter o resultado..1

— Patrick Mencias-lewis

bizarro. ninguém que não tivesse lido a documentação jamais suspeitaria que existe uma função "transparente". muito útil, obrigado!

— tobybot

Ótima resposta. Essa deve ser a resposta aceita. Obrigado. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);trabalhou para mim.

— Ryan

34

O SASS possui uma função rgba () integrada para avaliar valores.

rgba($color, $alpha)

Por exemplo

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

Um exemplo usando suas próprias variáveis:

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

Saídas:

.my-element {
  color: rgba(0, 170, 255, 0.5);
}

— Reggie Pinkham
fonte

6

você pode tentar esta solução, é a melhor ... url ( github )

// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

// Extend this class to save bytes
.transparent-background {
  background-color: transparent;
  zoom: 1;
}

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

// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
  @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
    .#{$name}-#{$alpha} {
      @include transparent($color, $alpha / 100);
    }
  }
}

// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);

— m.Elouafi
fonte

5

Sua resposta é boa, mas parece ser desnecessariamente complicada. Acho que os tons transparentes não são relevantes para a minha pergunta, embora você possa explicar do que se trata a classe de fundo transparente? Presumo que não preciso se não estiver usando o mixin de tons transparentes?

— 9788 Ricky Donohoe #

@ RickDonohoe, tanto quanto me lembro, z-index: 1, e fundo transparente é um substituto para o IE <9. Eu acho que m.Eloutafi colocou isso em classe separada, para uso posterior em outras necessidades. Assista a linha na resposta onde começa com "De:" ...

— Roman M. Koss

2

Se você precisar misturar cores de transparência variável e alfa, e com soluções que incluem rgba()funções, você receberá um erro como

      background-color: rgba(#{$color}, 0.3);
                       ^
      $color: #002366 is not a color.
   ╷
   │       background-color: rgba(#{$color}, 0.3);
   │                         ^^^^^^^^^^^^^^^^^^^^

Algo assim pode ser útil.

$meeting-room-colors: (
  Neumann: '#002366',
  Turing: '#FF0000',
  Lovelace: '#00BFFF',
  Shared: '#00FF00',
  Chilling: '#FF1493',
);
$color-alpha: EE;

@each $name, $color in $meeting-room-colors {

  .#{$name} {

     background-color: #{$color}#{$color-alpha};

  }

}

— Vojtech
fonte