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

Zmienne CSS, zwane również niestandardowymi właściwościami CSS, umożliwiają łatwe ponowne wykorzystanie w arkuszach stylów CSS. Jeśli pracowałeś już z motywami potomnymi WordPress, prawdopodobnie zajmujesz się stylizacją i nadpisywaniem takich rzeczy jak kolor, dopełnienie itp. Jeśli jesteś nowy w projektowaniu stron internetowych, warto wspomnieć, że nie ma nic złego w używaniu zwykłego CSS. Zmienne CSS są opcjonalne, a gdy będziesz bardziej zaawansowany, zaczniesz widzieć, jakie korzyści przyniosą ci zmienne.

Nie mają one na celu zastąpienia preprocesorów CSS, z których najpopularniejszym jest SASS. Specjalnie używam SASS do większych projektów i wraz ze zmiennymi CSS jako podstawowym elementem, oferuje wszelkie zaawansowane opcje. Jeśli jednak pracowałeś wcześniej z preprocesorami, wiesz, że muszą one zostać skompilowane, aby wyprowadzić CSS. Z tego powodu ten samouczek skupi się na zmiennych CSS i nie zagłębi się w szczegóły dotyczące preprocesorów.

Zmienne CSS to szczęśliwy środek. Na szczęście istnieje silna obsługa przeglądarek. Zanim zdecydujesz się używać ich w produkcji, sprawdź Czy mogę użyć, aby upewnić się, że mają wsparcie, którego potrzebujesz. Są bardziej wydajne niż praca ze zwykłym CSS, ale nie wymagają zaawansowanej konfiguracji, takiej jak SASS. Przeglądarka dokonuje „kompilacji” i nie jesteś zależny od ustawień i środowiska, które wyświetla skompilowany CSS.

Takie podejście jest dobrym projektem, który pasuje do takich rzeczy, jak stylizowanie prostych motywów potomnych WordPress. W takich projektach pojawia się potrzeba aktualizacji stylizacji w celu stworzenia motywu marki. Podoba mi się fakt, że mam możliwą do zarządzania listę nadpisań stylizacji i nie czuję potrzeby tworzenia środowiska kompilującego SASS do CSS.

Pobierz motywy Genesis Framework i StudioPress za darmo!

Hostując swoje witryny na Flywheel, będziesz mieć dostęp do ponad 30 motywów WordPress premium (w tym Genesis!) bezpośrednio z naszego zachwycającego pulpitu nawigacyjnego. To ponad 2000 USD, od których możesz zacząć za jedyne 15 USD/miesiąc! Dowiedz się więcej tutaj.

Jak korzystać ze zmiennych CSS

Podczas korzystania z określonych kolorów, aby zachować markę, jednym z powszechnych wymagań jest posiadanie palety kolorów marki, której można używać wielokrotnie. Niepotrzebne jest wpisywanie za każdym razem tej samej wartości koloru. A co jeśli chcesz zmienić jedną z wartości kolorów w zestawie? Na przykład może niebieski musi być nieco ciemniejszy. Dzieje się tak cały czas. Tak, oczywiście, jest zaufane znajdź i zamień. Dostosowanie wartości w jednym miejscu jest jednak bardziej efektywne, gdy dokonuje się tej globalnej zmiany i gdy zmienne są ponownie wykorzystywane.

Oto jak wygląda zmienna CSS :

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

Ponieważ usprawniam przepływ pracy w celu stylizacji motywu potomnego WordPress, dodałem zmienne do mojego pliku styles.css . To tylko „krótka lista”, a w miarę dodawania kolejnych, ważne staje się efektywne nazywanie każdej zmiennej.

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

Funkcja var()

Jak właściwie wykorzystywane są zmienne? To całkiem proste. Najpierw zmienna jest deklarowana, a następnie jest używana w wymaganym zestawie reguł CSS. Zakres jest ważną rzeczą, o której należy pamiętać. Zmienne należy zadeklarować w selektorze CSS, który mieści się w zamierzonym zakresie. W wielu przypadkach będziesz potrzebować zmiennych, aby były dostępne w zasięgu globalnym, w ten sposób będą one dostępne dla wszystkiego. Możesz użyć :root lub selektora body dla zasięgu globalnego. Mogą jednak wystąpić sytuacje, w których musisz ograniczyć zakres i chcesz pracować ze zmienną o zasięgu lokalnym.

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

Składnia var() jest dość prosta:
var(variable-name, value)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

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

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

W poniższym przykładzie najpierw zdefiniowano globalne właściwości niestandardowe o nazwie --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:

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

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, takie elementy jak dopełnienie i inne przydatne style można dostosować do różnych rozmiarów.

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

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

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

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

Co dalej: Wtyczki

Pobierz ten ebook, aby zobaczyć listę naszych najbardziej polecanych wtyczek dla programistów! Odkryliśmy, że wszystkie te wtyczki są proste w użyciu, nie mają zbyt dużej wydajności w Twojej witrynie i są po prostu niezawodne.

Podoba Ci się ten artykuł? Wypróbuj jedną z tych opcji:

• Jak stworzyć układ karty za pomocą CSS Grid Layout
• Jak połączyć siatki Flexbox i CSS w celu uzyskania wydajnych układów
• Proste dostosowania motywu potomnego Genesis