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

Question

Ich habe folgendes Sass mixin, die eine Hälfte komplette Änderung eines ist RGBa Beispiel:

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

I $opacity ok angewendet haben, aber jetzt bin ich ein stecken mit dem $color Teil. Die Farben, die ich in das Mixin senden werde, sind HEX nicht RGB.

werden Mein Beispiel nützlich sein:

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

Wie kann ich HEX-Werte innerhalb dieser mixin verwenden?

Answer 1

Die rgba() function kann auch Dezimal-RGB-Werte eine einzelne hex Farbe annehmen. Zum Beispiel funktionieren würde dies ganz gut:

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

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

Wenn Sie jemals die Hex-Farbe in RGB-Komponenten brechen müssen, obwohl, können Sie die red(), green() und blue() Funktionen verwenden zu tun, so:

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

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

Answer 2

können Sie diese Lösung versuchen, die besten ... 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); 

Answer 3

Es gibt eine eingebaute mixin: transparentize($color, $amount);

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

Die Menge zwischen 0 bis 1 sein sollte;

Official Sass Documentation (Module: Sass::Script::Functions)

Answer 4

SASS hat einen eingebauten in rgba() function Werte zu bewerten.

rgba($color, $alpha) 

z.

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

Ein Beispiel Ihre eigenen Variablen:

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

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

Ausgänge:

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