Sass - Convertir Hex a RGBa para opacidad de fondo


213

Tengo el siguiente Sass mixin, que es una modificación medio completa de un ejemplo RGBa :

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

He aplicado $opacitybien, pero ahora estoy atascado con la $colorparte. Los colores que enviaré al mixin serán HEX, no RGB.

Mi ejemplo de uso será:

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

¿Cómo puedo usar valores HEX dentro de este mixin?

Respuestas:


414

La función rgba () puede aceptar un solo color hexadecimal y valores decimales RGB. Por ejemplo, esto funcionaría bien:

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

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

Sin embargo, si alguna vez necesita dividir el color hexadecimal en componentes RGB, puede usar las funciones rojo () , verde () y azul () para hacerlo:

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

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

Juro que probé esto Y las funciones r, b, g y no funcionó. Estaba usando colores dinámicos de un back-end de Drupal, lo que puede haber roto algo. Aún así, lo ordené al final y la respuesta que encontré después de una investigación más a fondo +1
Rick Donohoe

1
PERO, ¿cuál es el equivalente hexadecimal de # ($ color + $ opacidad)? - Esto puede ser útil. ¿realizable?
somedirection

2
Que yo sepa, RGBA agrega opacidad , lo que significa que puede ver elementos detrás de él. Con el estándar hex, no puedes hacer esto.
Richard Peck

Gracias. Nunca hubiera pensado probar hexadecimal rgb a!
RayViljoen

2
Es mejor usar rgba($color, $alpha)like rgba(#000000, 0.6)ya que el resultado es el mismo y no hay necesidad de reinventar la rueda. ;)
lbartolic

118

Hay una mezcla incorporada: transparentize($color, $amount);

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

La cantidad debe estar entre 0 y 1;

Documentación oficial de Sass (Módulo: Sass :: Script :: Funciones)


1
¡Me gusta esto! Ideal para la implementación moderna del navegador.
Mike Kormendy

16
como nota al margen: la cantidad de $ es la cantidad que se restará, no el valor que desea establecer
MMachinegun

3
Funcionó muy bien, excepto que la cantidad parece ser el significado inverso que desea que sea 90%transparente para obtener el resultado.1
Patrick Mencias-lewis

extraño. nadie que no haya leído la documentación sospechará que existe una función de "transparencia". aunque muy útil, gracias!
tobybot

Gran respuesta. Esta debería ser la respuesta aceptada. Gracias. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);trabajó para mi.
Ryan

34

SASS tiene una función incorporada rgba () para evaluar valores.

rgba($color, $alpha)

P.ej

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

Un ejemplo usando sus propias variables:

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

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

Salidas:

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

6

puedes probar esta solución, es la mejor ... 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);

55
Su respuesta es buena pero parece ser innecesariamente complicada. Supongo que los tonos transparentes no son relevantes para mi pregunta, aunque ¿puedes explicar de qué se trata la clase de fondo transparente? Supongo que no lo necesito si no estoy usando la mezcla de tonos transparentes?
Rick Donohoe

@RickDonohoe, por lo que recuerdo, el índice z: 1 y el fondo transparente son una alternativa para IE <9. Creo que M. Eloutafi lo puso en una clase separada, para usarlo en otras necesidades. Mire la fila en respuesta donde comienza con "De:" ...
Roman M. Koss

2

Si necesita mezclar colores de transparencia variable y alfa, y con soluciones que incluyen la rgba()función, obtendrá un error como

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

Algo como esto podría 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};

  }

}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.