Jak dodać zmienne CSS, aby dostosować motywy potomne WordPress

Zmienne CSS, zwane również niestandardowymi właściwościami CSS, umożliwiają łatwe ponowne użycie w arkuszach stylów CSS.

Jeśli pracowałeś z motywami potomnymi WordPress, prawdopodobnie robisz dużo stylizacji i nadpisujesz takie rzeczy, jak kolor, wypełnienie itp. Jeśli dopiero zaczynasz projektowanie stron internetowych, warto wspomnieć, że nie ma nic złego w używaniu zwykłego CSS. Zmienne CSS są opcjonalne, a gdy staniesz się bardziej zaawansowany, zaczniesz dostrzegać, jakie korzyści przyniosą ci zmienne.

Nie mają one na celu zastąpienia preprocesorów CSS, z których najpopularniejszym jest SASS. Wielu konstruktorów używa SASS specjalnie do większych projektów, a wraz ze zmiennymi CSS jako podstawowym elementem oferuje wiele zaawansowanych opcji.

Jeśli jednak wcześniej pracowałeś z preprocesorami, wiesz, że muszą one zostać skompilowane, aby wygenerować CSS. Z tego powodu ten samouczek skupi się na zmiennych CSS i nie będzie zagłębiał się w szczegóły dotyczące preprocesorów.

Zmienne CSS są szczęśliwym medium i na szczęście istnieje silna obsługa przeglądarek. Zanim zdecydujesz się używać zmiennych CSS w środowisku produkcyjnym, sprawdź, czy mogę użyć, aby upewnić się, że mają potrzebne wsparcie.

Zmienne CSS są bardziej wydajne niż praca ze zwykłym CSS, ale nie wymagają zaawansowanej konfiguracji, takiej jak SASS. Przeglądarka „kompiluje” i nie jesteś zależny od konfiguracji i środowiska, które wyświetla skompilowany CSS.

To podejście jest dobrym projektem pasującym do takich rzeczy, jak stylizacja prostych motywów potomnych WordPress. W przypadku projektów takich jak ten zwykle zachodzi potrzeba aktualizacji stylizacji w celu stworzenia markowego motywu. Zmienne CSS mogą pomóc, ponieważ zapewniają łatwą w zarządzaniu listę przesłonięć stylów i nie wymagają specjalnego środowiska do kompilacji SASS do CSS.

Zdobądź motywy Genesis Framework i StudioPress za darmo!

Klienci WP Engine uzyskują dostęp do pakietu premium motywów WordPress, które są standardowo dostępne w każdym abonamencie! Możesz zacząć budować swoją następną witrynę już za 20 USD miesięcznie! Dowiedz się więcej tutaj.

Jak używać zmiennych CSS

Podczas używania określonych kolorów, aby zachować markę, jednym z powszechnych wymagań jest posiadanie palety kolorów marki, której można używać wielokrotnie. Wpisywanie tej samej wartości koloru za każdym razem staje się zbędne. A co jeśli chcesz zmienić jedną z wartości kolorów w zestawie?

Na przykład, być może niebieski powinien być nieco ciemniejszy. To się dzieje cały czas. Tak, oczywiście, jest zaufany znajdź i zamień. Dostosowanie wartości w jednym miejscu jest jednak bardziej efektywne, gdy dokonuje się tej globalnej zmiany i ponieważ zmienne są ponownie wykorzystywane.

Oto jak wygląda zmienna CSS :

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

Ponieważ usprawniam przepływ pracy przy stylizowaniu motywu potomnego WordPress, dodałem zmienne do mojego pliku styles.css . To tylko „krótka lista”, a wraz z dodawaniem kolejnych zmiennych efektywne nazywanie każdej zmiennej staje się ważne.

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

Funkcja var().

Jak właściwie używane są zmienne? To całkiem proste. Najpierw deklarowana jest zmienna, a następnie używana w wymaganym zestawie reguł CSS.

Zakres jest ważną rzeczą, o której należy pamiętać. Zmienne muszą być zadeklarowane w selektorze CSS, który mieści się w zamierzonym zakresie. W wielu przypadkach będziesz potrzebować zmiennych, które będą dostępne w zasięgu globalnym, w ten sposób będą dostępne dla wszystkich. Możesz użyć selektora :root lub body dla zasięgu globalnego. Mogą jednak wystąpić sytuacje, w których trzeba ograniczyć zakres i chcieć pracować ze zmienną o zasięgu lokalnym.

Łatwo jest dostrzec zmienne; mają przed sobą dwie kreski. Należy uwzględnić dwie kreski (–).

Składnia var() jest całkiem prosta:

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

Zamiast dostosowywać kolor w wielu miejscach, wartość zmiennej jest dostosowywana w jednym miejscu.

Inspektor sieci (w tym przypadku Chrome) pozwala sprawdzić, które zmienne są używane.

W poniższym przykładzie najpierw zdefiniowano globalne właściwości niestandardowe o nazwach --light-gray i --text-black . Wywoływana jest funkcja var() , która wstawia wartość właściwości niestandardowych później w arkuszu stylów:

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

Warto wspomnieć, że zmienne mogą być bardzo przydatne podczas pracy z punktami przerwania CSS. Używając zmiennych o zasięgu globalnym w różnych punktach przerwania, rzeczy takie jak dopełnienie i inne przydatne style można dostosować do różnych rozmiarów.

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

Oto przykład zmiennych, które można znaleźć w zasięgu lokalnym. Jak dotąd dotknęliśmy tylko zasięgu globalnego, więc zauważysz, że rzeczy nie są w katalogu głównym. To są style komunikatu ostrzegawczego. Zadeklarowano tutaj kolor tekstu ostrzeżenia, który jest użyteczny tylko dla tej klasy. Warto również zauważyć, że calc można również wykorzystać.

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

Powyższe przykłady obejmują podstawy zmiennych CSS. Koncepcje te można zastosować do niestandardowych motywów WordPress lub dowolnego innego niestandardowego kodu CSS, który napiszesz. Zmienne mają przewagę nad zwykłym CSS i pomagają wydajniej pracować przy wprowadzaniu zmian w całej witrynie. Pozwalają na lepiej zorganizowane arkusze stylów bez potrzeby stosowania preprocesora.

Napędzaj swobodę tworzenia dzięki silnikowi WP

WP Engine zapewnia swobodę tworzenia w WordPress. Produkty firmy, najszybsze spośród wszystkich dostawców WordPress, zasilają 1,5 miliona cyfrowych doświadczeń. Więcej z 200 000 najlepszych witryn na świecie używa WP Engine do zasilania swoich cyfrowych doświadczeń niż ktokolwiek inny w WordPress. Znajdź nasze więcej na wpengine.com lub porozmawiaj z przedstawicielem już dziś!