Sass - Konvertieren von Hex in RGBa für Hintergrundopazität

213

Ich habe das folgende Sass-Mixin, das eine halb vollständige Modifikation eines RGBa-Beispiels ist :

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

Ich habe mich $opacityok beworben , aber jetzt stecke ich mit dem $colorTeil fest. Die Farben, die ich in das Mixin sende, sind HEX, nicht RGB.

Mein Beispiel wird sein:

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

Wie kann ich HEX-Werte in diesem Mixin verwenden?

— Rick Donohoe
quelle

414

Die Funktion rgba () kann sowohl eine einzelne Hex-Farbe als auch dezimale RGB-Werte akzeptieren. Zum Beispiel würde dies gut funktionieren:

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

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

Wenn Sie die Hex-Farbe jedoch jemals in RGB-Komponenten aufteilen müssen, können Sie dazu die Funktionen rot () , grün () und blau () verwenden:

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

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

— Trichter
quelle

Ich schwöre, ich habe es versucht UND die Funktionen r, b, g und es hat nicht funktioniert. Ich habe jedoch dynamische Farben aus einem Drupal-Backend verwendet, die möglicherweise etwas kaputt gemacht haben. Trotzdem sortierte es am Ende und die Antwort fand ich nach weiteren Recherchen +1

— Rick Donohoe

1

ABER, was ist das Hex-Äquivalent von # ($ color + $ opacity)? - Das könnte nützlich sein. machbar?

— Somedirection

2

Nach meinem besten Wissen fügt RGBA Deckkraft hinzu , was bedeutet, dass Sie Elemente dahinter sehen können. Mit Standard hexkönnen Sie dies nicht tun.

— Richard Peck

Vielen Dank. Hätte nie gedacht, Hex auf RGB A zu versuchen !

— RayViljoen

2

Besser zu verwenden rgba($color, $alpha)als, rgba(#000000, 0.6)da das Ergebnis das gleiche ist und das Rad nicht neu erfunden werden muss. ;)

— lbartolic

118

Es gibt ein eingebautes Mixin: transparentize($color, $amount);

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

Der Betrag sollte zwischen 0 und 1 liegen;

Offizielle Sass-Dokumentation (Modul: Sass :: Script :: Functions)

— user3631047
quelle

1

Ich mag das! Ideal für die moderne Browser-Implementierung.

— Mike Kormendy

16

als Randnotiz: Der $ Betrag ist, wie viel es subtrahiert wird, nicht der Wert, den Sie einstellen möchten

— MMachinegun

3

Hat großartig funktioniert, außer dass die Menge die umgekehrte Bedeutung zu sein scheint, was bedeutet, dass Sie es 90%transparent machen möchten, um das Ergebnis zu erhalten.1

— Patrick Mencias-lewis

bizarr. Niemand, der die Dokumentation nicht gelesen hatte, würde jemals vermuten, dass es eine "Transparenz" -Funktion gibt. sehr hilfreich, danke!

— Tobbybot

Gute Antwort. Dies sollte die akzeptierte Antwort sein. Vielen Dank. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);arbeitete für mich.

— Ryan

34

SASS verfügt über eine integrierte Funktion rgba () zur Auswertung von Werten.

rgba($color, $alpha)

Z.B

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

Ein Beispiel mit Ihren eigenen Variablen:

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

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

Ausgänge:

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

— Reggie Pinkham
quelle

6

Sie können diese Lösung ausprobieren, ist die beste ... 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
quelle

5

Ihre Antwort ist gut, scheint aber unnötig kompliziert zu sein. Ich vermute, dass die transparenten Farbtöne für meine Frage nicht relevant sind. Können Sie jedoch erklären, worum es in der transparenten Hintergrundklasse geht? Ich nehme an, ich brauche es nicht, wenn ich nicht das Mixin für transparente Farbtöne verwende.

— Rick Donohoe

@ RickDonohoe, soweit ich mich erinnere, ist Z-Index: 1 und transparenter Hintergrund ein Fallback für IE <9. Ich denke, dass m.Eloutafi das in eine separate Klasse eingeteilt hat, um es für andere Zwecke weiter zu verwenden. Beobachten Sie die Reihe als Antwort, wo sie mit "Von:" beginnt ...

— Roman M. Koss

2

Wenn Sie Farben aus variabler und Alpha-Transparenz mischen müssen und bei Lösungen, die rgba()Funktionen enthalten, wird ein Fehler wie angezeigt

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

So etwas könnte nützlich sein.

$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
quelle