Ich entwerfe eine App in Elektron, damit ich Zugriff auf CSS-Variablen habe. Ich habe eine Farbvariable definiert in vars.css
:
:root {
--color: #f0f0f0;
}
Ich möchte diese Farbe verwenden main.css
, aber mit etwas Deckkraft:
#element {
background: (somehow use var(--color) at some opacity);
}
Wie würde ich das machen? Ich benutze keinen Präprozessor, nur CSS. Ich würde eine reine CSS-Antwort bevorzugen, aber ich werde JavaScript / jQuery akzeptieren.
Ich kann nicht verwenden, opacity
da ich ein Hintergrundbild verwende, das nicht transparent sein sollte.
css
colors
css-variables
JoshyRobot
quelle
quelle
Antworten:
Sie können einen vorhandenen Farbwert nicht übernehmen und einen Alphakanal darauf anwenden. Sie können nämlich keinen vorhandenen Hex-Wert wie z
#f0f0f0
eine Alpha-Komponente angeben und den resultierenden Wert mit einer anderen Eigenschaft verwenden.Mit benutzerdefinierten Eigenschaften können Sie Ihren Hex-Wert jedoch zur Verwendung in ein RGB-Triplett konvertieren
rgba()
, diesen Wert in der benutzerdefinierten Eigenschaft (einschließlich der Kommas!) Speichern, diesen Wert mithilfevar()
in einergba()
Funktion mit Ihrem gewünschten Alpha-Wert ersetzen einfach arbeiten:Dies scheint fast zu schön, um wahr zu sein. 1 Wie funktioniert es?
Die Magie liegt in der Tatsache, dass die Werte von benutzerdefinierten Eigenschaften wie beim Ersetzen von
var()
Referenzen in einem Eigenschaftswert ersetzt werden, bevor der Wert dieser Eigenschaft berechnet wird. Dies bedeutet, dass in Bezug auf benutzerdefinierte Eigenschaften der Wert von--color
in Ihrem Beispiel überhaupt kein Farbwert ist, bisvar(--color)
irgendwo ein Ausdruck erscheint, der einen Farbwert erwartet (und nur in diesem Kontext). Aus Abschnitt 2.1 der CSS-Variablen-Spezifikation:Und Abschnitt 3 :
Dies bedeutet, dass der
240, 240, 240
oben angezeigte Wert direkt in diergba()
Funktion eingesetzt wird, bevor die Deklaration berechnet wird. Also das:rgba()
Dies scheint zunächst kein gültiges CSS zu sein, da nicht weniger als vier durch Kommas getrennte numerische Werte erwartet werden:Das ist natürlich vollkommen gültiges CSS.
Wenn Sie noch einen Schritt weiter gehen, können Sie die Alpha-Komponente in einer eigenen benutzerdefinierten Eigenschaft speichern:
und ersetzen Sie es mit dem gleichen Ergebnis:
Auf diese Weise können Sie verschiedene Alpha-Werte festlegen, die Sie im laufenden Betrieb austauschen können.
1 Nun, wenn Sie das Code-Snippet in einem Browser ausführen, der keine benutzerdefinierten Eigenschaften unterstützt.
quelle
.element2 { background-color: rgba(var(--red), var(--low-opacity); }
. Auf diese Weise können Sie die Verwendung von Variablen voll ausnutzen :)."240, 240, 240"
mit einem Farbwähler nicht bearbeitet werden. Das ist ein großer Fehler, wenn Sie die richtigen Farben für Ihre GUI finden müssen.var(--hex-color)99
wird in zwei Token konvertiert#333333 99
(beachten Sie den Platz zum Trennen von Token), was offensichtlich nicht das ist, was Sie wollen. Benutzerdefinierte Eigenschaften wurden ursprünglich zum Kopieren von Token und nicht von Zeichenfolgen definiert. Dies ist das Endergebnis. Es ist viel zu spät, dies jetzt zu beheben.Ich weiß, dass das OP keinen Präprozessor verwendet, aber mir wäre geholfen worden, wenn die folgenden Informationen Teil der Antwort hier gewesen wären (ich kann noch keinen Kommentar abgeben, sonst hätte ich die @ BoltClock-Antwort kommentiert.
Wenn Sie z. B. scss verwenden, schlägt die obige Antwort fehl, da scss versucht, die Stile mit einer scss-spezifischen Funktion rgba () / hsla () zu kompilieren, für die 4 Parameter erforderlich sind. Rgba () / hsla () sind jedoch auch native CSS-Funktionen, sodass Sie die SCSS-Funktion mithilfe der Zeichenfolgeninterpolation umgehen können.
Beispiel (gültig in sass 3.5.0+):
Beachten Sie, dass die Zeichenfolgeninterpolation für Nicht-CSS-Scss-Funktionen nicht funktioniert, z. B.
lighten()
weil der resultierende Code kein funktionales CSS ist. Es wäre jedoch immer noch ein gültiges scss, sodass Sie keinen Fehler bei der Kompilierung erhalten würden.quelle
@function rgb($args...) { @return #{'rgb(#{$args})'}; }
@function rgba($args...) { @return #{'rgba(#{$args})'}; }
@function hsl($args...) { @return #{'hsl(#{$args})'}; }
@function hsla($args...) { @return #{'hsla(#{$args})'}; }
`` ``rgba
istrgb
seit geraumer Zeit ein Synonym für . Sie dürfen daher das "a" fallen lassen.RGB
), die dann von sass ignoriert werden. ZB :color: RGB(var(--color_rgb), 0.5);
. Von GitHubIch war in einer ähnlichen Situation, aber leider funktionierten die angegebenen Lösungen für mich nicht, da die Variablen alles von
rgb
bishsl
bishex
oder sogar Farbnamen sein konnten.Ich habe dieses Problem jetzt gelöst, indem ich das
background-color
und dasopacity
auf ein Pseudo:after
oder:before
Element angewendet habe:Je nach dem Element, auf das der Hintergrund angewendet werden soll, müssen die Stile möglicherweise ein wenig geändert werden.
Es funktioniert möglicherweise nicht in allen Situationen, aber hoffentlich hilft es in einigen Fällen, in denen die anderen Lösungen nicht verwendet werden können.
Bearbeiten: Mir ist gerade aufgefallen, dass diese Lösung offensichtlich auch die Textfarbe beeinflusst, da sie ein Element vor dem Zielelement erstellt und eine transparente Hintergrundfarbe darauf anwendet.
Dies kann in einigen Fällen ein Problem sein.
quelle
rgb
oderHSL
) möglich ist, sondern auch Konflikte zwischen nativen CSS-Farbfunktionen und den Farbfunktionen von Sass vermieden werden. Siehe die Antwort von SimplyPhy unten.:before
damit Sie die richtige Stapelreihenfolge erhalten, ohne damit zu spielenz-index
.Dies ist in der Tat mit CSS möglich . Es ist nur ein bisschen schmutzig und Sie müssen Farbverläufe verwenden. Ich habe als Beispiel ein kleines Snippet codiert. Beachten Sie, dass Sie für dunkle Hintergründe die schwarze Deckkraft verwenden sollten, für helle die weißen:
quelle
Hier ersetzen Sie die Deckkraft durch einen Wert zwischen 0 und 1
quelle
rgba(var(--color), opacity)
bisschen. Zumal Ihr benutzerdefinierter Eigenschaftswert die gesamte rgb () - Notation ist. Aber auch wegen des Schlüsselworts "Deckkraft".SCSS / SASS
Vorteil: Sie können einfach Hex-Farbwerte verwenden, um stattdessen das 8-Bit für jeden Kanal (0-255) zu verwenden.
So habe ich es mit der ursprünglichen Idee gemacht: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
Bearbeiten: Sie können die Alpha-Funktion auch so ändern, dass nur
#{$color-name}-rgb
die generierten CSS-Variablen * -r, * -g, * -b verwendet und weggelassen werden.Ergebnis
Verwendung:
Mixin und Funktionen
Hoffentlich spart dies jemandem etwas Zeit.
quelle
Sie können für jede Farbe eine bestimmte Variable / einen bestimmten Wert festlegen - das Original und die mit Deckkraft:
Wenn Sie dies nicht verwenden können und mit der Javascript-Lösung einverstanden sind, können Sie diese verwenden:
quelle
Versuchen Sie Folgendes, um rgba () mit einer allgemeinen CSS-Variablen zu verwenden:
quelle
In CSS sollten Sie entweder rgba-Werte verwenden können:
oder stellen Sie einfach die Deckkraft ein:
quelle
Wenn Sie Hex-Farben wie mich lieben, gibt es eine andere Lösung. Der Hex-Wert ist 6-stellig, danach ist der Alpha-Wert. 00 ist 100% Transparenz 99 ist ungefähr 75%, dann wird das Alphabet 'a1-af' verwendet, dann 'b1-bf' und endet mit 'ff', was 100% undurchsichtig ist.
quelle