Sass - Konwersja Hex na RGBa dla nieprzezroczystości tła

213

Mam następujący mixin Sass, który jest w połowie pełną modyfikacją przykładu RGBa :

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

Złożyłem aplikację $opacityok, ale teraz utknąłem z tą $colorczęścią. Kolory, które wyślę do mixinu to HEX, a nie RGB.

Moim przykładem będzie:

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

Jak mogę używać wartości HEX w tym mixinie?

css sass background-color mixins rgba Rick Donohoe
źródło

Odpowiedzi:

414

Funkcja rgba () może akceptować pojedynczy kolor szesnastkowy, a także dziesiętne wartości RGB. Na przykład działałoby to dobrze:

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

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

Jeśli jednak będziesz musiał podzielić kolor szesnastkowy na komponenty RGB, możesz użyć do tego funkcji czerwonej () , zielonej () i niebieskiej () :

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

background: rgb($red, $green, $blue); /* same as using "background: $color" */
zbiornik
źródło
Przysięgam, że próbowałem tego ORAZ funkcji r, b, g i to nie działało. Użyłem dynamicznych kolorów z zaplecza Drupala, które mogły coś zepsuć. Mimo to posortowałem to na końcu i odpowiedź, którą znalazłem po dalszych badaniach +1
Rick Donohoe
1
ALE, jaki jest ekwiwalent szesnastkowy # ($ kolor + $ krycie)? - to może być przydatne. wykonalny?
jakimś kierunku
2
Zgodnie z moją najlepszą wiedzą, RGBA dodaje krycie , co oznacza, że ​​widać za nim elementy. W standardzie hexnie możesz tego zrobić.
Richard Peck,
Dzięki. Nigdy nie pomyślałbym, żeby wypróbować hex na rgb a!
RayViljoen,
2
Lepiej używać rgba($color, $alpha)jak rgba(#000000, 0.6)jako wynik jest taki sam i nie ma potrzeby wyważać otwartych drzwi. ;)
lbartolic
118

Istnieje wbudowane mixin: transparentize($color, $amount);

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

Kwota powinna wynosić od 0 do 1;

Oficjalna dokumentacja Sass (moduł: Sass :: Script :: Funkcje)

użytkownik3631047
źródło
1
Lubię to! Idealne do nowoczesnej implementacji przeglądarki.
Mike Kormendy,
16
na marginesie: kwota $ to, ile będzie odejmować, a nie wartość, którą chcesz ustawić
MMachinegun
3
Świetnie się sprawdziło, ale wydaje się, że kwota jest odwrotna, co oznacza, że ​​chcesz uzyskać 90%przejrzystość, aby uzyskać wynik.1
Patrick Mencias-lewis
dziwaczny. nikt, kto nie przeczytał dokumentacji, nigdy nie podejrzewałby, że istnieje funkcja „przezroczystości”. bardzo pomocny, dziękuję!
tobybot
Świetna odpowiedź. To powinna być zaakceptowana odpowiedź. Dzięki. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);pracował dla mnie.
Ryan
34

SASS ma wbudowaną funkcję rgba () do oceny wartości.

rgba($color, $alpha)

Na przykład

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

Przykład użycia własnych zmiennych:

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

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

Wyjścia:

.my-element {
  color: rgba(0, 170, 255, 0.5);
}
Reggie Pinkham
źródło
6

możesz wypróbować to rozwiązanie, jest najlepszy ... 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
źródło
5
Twoja odpowiedź jest dobra, ale wydaje się niepotrzebnie skomplikowana. Zgaduję, że przezroczyste odcienie nie mają związku z moim pytaniem, chociaż czy możesz wyjaśnić, na czym polega klasa przezroczystego tła? Zakładam, że nie potrzebuję tego, jeśli nie używam mixinu z przezroczystymi odcieniami?
Rick Donohoe
@ RickDonohoe, o ile pamiętam, indeks Z: 1, a przezroczyste tło jest rezerwą dla IE <9. Myślę, że m.Eloutafi umieścił to w osobnej klasie, do późniejszego wykorzystania w innych potrzebach. Zobacz wiersz w odpowiedzi, od którego zaczyna się od „Od:” ...
Roman M. Koss
2

Jeśli potrzebujesz mieszać kolory z przezroczystości zmiennej i alfa, a dzięki rozwiązaniom obejmującym rgba()funkcję pojawia się błąd

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

Coś takiego może być przydatne.

$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
źródło