Projektuję aplikację w electron, więc mam dostęp do zmiennych CSS. Zdefiniowałem zmienną koloru w vars.css
:
:root {
--color: #f0f0f0;
}
Chcę użyć tego koloru main.css
, ale z pewnym kryciem:
#element {
background: (somehow use var(--color) at some opacity);
}
Jak bym to zrobił? Nie używam żadnego preprocesora, tylko CSS. Wolałbym odpowiedź w całości CSS, ale akceptuję JavaScript / jQuery.
Nie mogę użyć, opacity
ponieważ używam obrazu tła, który nie powinien być przezroczysty.
css
colors
css-variables
JoshyRobot
źródło
źródło
Odpowiedzi:
Nie możesz wziąć istniejącej wartości koloru i zastosować do niej kanał alfa. Mianowicie, nie możesz wziąć istniejącej wartości szesnastkowej, takiej jak
#f0f0f0
nadać jej składnik alfa i użyć wynikowej wartości z inną właściwością.Jednak właściwości niestandardowe umożliwiają konwersję wartości szesnastkowej na trójkę RGB do użycia z
rgba()
, przechowywanie tej wartości we właściwości niestandardowej (łącznie z przecinkami!), Zastąpienie tej wartości zavar()
pomocąrgba()
funkcji żądaną wartością alfa, a po prostu pracuj:Wydaje się to zbyt piękne, aby mogło być prawdziwe. 1 Jak to działa?
Magia polega na tym, że wartości właściwości niestandardowych są zastępowane tak, jak ma to miejsce podczas zastępowania
var()
odniesień w wartości właściwości, zanim wartość tej właściwości zostanie obliczona. Oznacza to, że o ile właściwości niestandardowe są zainteresowane, wartość--color
w przykładzie nie jest wartością koloru w ogóle aż dovar(--color)
wypowiedzi pojawia gdzieś, że spodziewa się, że wartość koloru (i tylko w tym kontekście). Z sekcji 2.1 specyfikacji zmiennych css:I sekcja 3 :
Oznacza to, że
240, 240, 240
wartość, którą widzisz powyżej, zostanie podstawiona bezpośrednio dorgba()
funkcji przed obliczeniem deklaracji. Więc to:który na początku nie wydaje się być prawidłowym CSS, ponieważ
rgba()
oczekuje nie mniej niż czterech wartości liczbowych oddzielonych przecinkami, staje się taki:co oczywiście jest całkowicie poprawnym CSS.
Idąc o krok dalej, możesz przechowywać komponent alfa we własnej niestandardowej właściwości:
i zastąp go, z tym samym wynikiem:
Dzięki temu możesz mieć różne wartości alfa, które możesz wymieniać w locie.
1 Cóż, tak jest, jeśli uruchamiasz fragment kodu w przeglądarce, która nie obsługuje niestandardowych właściwości.
źródło
.element2 { background-color: rgba(var(--red), var(--low-opacity); }
. W ten sposób możesz w pełni wykorzystać użycie zmiennych :)."240, 240, 240"
nie można edytować za pomocą próbnika kolorów. To ogromna porażka, gdy musisz znaleźć odpowiednie kolory dla swojego GUI.var(--hex-color)99
jest konwertowana na dwa tokeny#333333 99
(zwróć uwagę na miejsce na oddzielne tokeny), co oczywiście nie jest tym, czego chcesz. Właściwości niestandardowe zostały pierwotnie zdefiniowane w celu kopiowania tokenów, a nie ciągów i jest to efekt końcowy. Jest już za późno, aby to teraz naprawić.Wiem, że OP nie używa preprocesora, ale pomogłoby mi, gdyby następujące informacje były częścią odpowiedzi tutaj (nie mogę jeszcze komentować, w przeciwnym razie skomentowałbym odpowiedź @BoltClock.
Jeśli używasz np. Scss, powyższa odpowiedź nie powiedzie się, ponieważ scss próbuje skompilować style z funkcją rgba () / hsla () specyficzną dla scss, która wymaga 4 parametrów. Jednak rgba () / hsla () są również natywnymi funkcjami css, więc możesz użyć interpolacji ciągów, aby ominąć funkcję scss.
Przykład (ważny w sass 3.5.0+):
Zwróć uwagę, że interpolacja ciągów nie będzie działać w przypadku funkcji scss innych niż CSS, na przykład
lighten()
, ponieważ wynikowy kod nie byłby funkcjonalnym CSS. Jednak nadal byłby to poprawny scss, więc nie wystąpiłby błąd podczas kompilacji.źródło
@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
jest synonimem odrgb
dłuższego czasu .. Dlatego możesz upuścić „a”.RGB
), które są następnie ignorowane przez sass. Npcolor: RGB(var(--color_rgb), 0.5);
. : . Z GitHubByłem w podobnej sytuacji, ale niestety podane rozwiązania nie działa dla mnie, jako zmienne może być cokolwiek od
rgb
celuhsl
dohex
lub nawet kolor nazw.Rozwiązałem ten problem teraz, stosując
background-color
iopacity
do pseudo:after
lub:before
elementu:Style mogą wymagać trochę zmiany, w zależności od elementu, do którego należy zastosować tło.
Może też nie działać we wszystkich sytuacjach, ale mam nadzieję, że pomaga w niektórych przypadkach, w których nie można zastosować innych rozwiązań.
Edycja: Właśnie zauważyłem, że to rozwiązanie oczywiście wpływa również na kolor tekstu, ponieważ tworzy element przed elementem docelowym i nakłada na niego przezroczysty kolor tła.
W niektórych przypadkach może to stanowić problem.
źródło
rgb
lubHSL
), ale także pozwala uniknąć konfliktu między natywnymi funkcjami kolorów CSS a funkcjami kolorów Sass. Zobacz odpowiedź SimplyPhy poniżej.:before
aby uzyskać odpowiednią kolejność układania bez gryz-index
.Jest to rzeczywiście możliwe dzięki CSS . Jest trochę brudny i będziesz musiał używać gradientów. Jako przykład zakodowałem mały fragment, zwróć uwagę, że na ciemnych tłach powinieneś używać czarnego krycia, jak dla jasnego - białego .:
źródło
gdzie zamieniasz krycie na dowolną wartość z przedziału od 0 do 1
źródło
rgba(var(--color), opacity)
wędzidło. Zwłaszcza, że wartością właściwości niestandardowej jest cała notacja rgb (). Ale także ze względu na słowo kluczowe „krycie”.SCSS / SASS
Zaleta: Możesz po prostu użyć wartości koloru Hex, zamiast tego użyć 8 bitów dla każdego kanału (0-255).
Tak to zrobiłem z początkowym pomysłem: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
Edycja: Możesz także zmodyfikować funkcję alfa, aby po prostu używać
#{$color-name}-rgb
i pomijać wygenerowane * -r, * -g, * -b zmienne CSS.Wynik
Stosowanie:
Mieszanie i funkcje
Miejmy nadzieję, że pozwoli to komuś zaoszczędzić trochę czasu.
źródło
Możesz ustawić określoną zmienną / wartość dla każdego koloru - oryginalnego i tego z kryciem:
Jeśli nie możesz tego użyć i nie przeszkadza Ci rozwiązanie javascript, możesz użyć tego:
źródło
Aby użyć rgba () z ogólną zmienną css, spróbuj tego:
źródło
W CSS powinieneś być w stanie użyć wartości rgba:
lub po prostu ustaw krycie:
źródło
Jeśli tak jak ja kochasz kolory hex, jest inne rozwiązanie. Wartość szesnastkowa składa się z 6 cyfr, a po niej jest wartością alfa. 00 to 100% przezroczystości 99 to około 75% to używa alfabetu „a1-af”, a następnie „b1-bf” kończącego się na „ff”, który jest w 100% nieprzezroczysty.
źródło