Sass-Konwersja Hex NA rgba dla krycia tła
Mam następujący Sass mixin, który jest w połowie kompletną modyfikacją RGBa przykład:
@mixin background-opacity($color, $opacity: .3) {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, $opacity);
}
Zastosowałem $opacity
ok, ale teraz utknąłem z $color
częścią.
Kolory, które będę wysyłać do mixin będzie HEX Nie RGB.
Moje przykładowe użycie będzie:
element {
@include background-opacity(#333, .5);
}
Jak mogę używać wartości szesnastkowych w tym mixinie?
4 answers
Funkcja rgba () może przyjmować pojedynczy kolor szesnastkowy oraz dziesiętne wartości RGB. Na przykład, to będzie działać 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 chcesz podzielić kolor szesnastkowy na komponenty RGB, możesz użyć czerwonego (), funkcja green () i blue () w tym celu:
$red: red($color);
$green: green($color);
$blue: blue($color);
background: rgb($red, $green, $blue); /* same as using "background: $color" */
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 21:00:24
Istnieje wbudowany mixin: transparentize($color, $amount);
background-color: transparentize(#F05353, .3);
Kwota powinna wynosić od 0 do 1;
Oficjalna Dokumentacja Sass (Moduł: Sass::Script::Functions)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-09 13:52:32
Sass ma wbudowaną funkcję rgba () do oceny wartości.
rgba($color, $alpha)
Np.
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);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-24 00:16:18
Możesz wypróbować To rozwiązanie, jest najlepsze... 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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 10:06:16