Cum să adăugați variabile CSS pentru a personaliza temele copii WordPress

Variabilele CSS, denumite și proprietăți personalizate CSS, permit reutilizarea ușoară în foile de stil CSS.

Dacă ați lucrat cu teme pentru copii WordPress, probabil că vă veți descoperi că faceți o mulțime de stiluri și înlocuiți lucruri precum culoarea, căptușeala etc. Dacă sunteți nou în design web, merită menționat că nu este nimic în neregulă cu utilizarea simplă. CSS. Variabilele CSS sunt opționale și, pe măsură ce deveniți mai avansate, veți începe să vedeți cum vă vor beneficia variabilele.

Acestea nu sunt menite să înlocuiască preprocesoarele CSS, cele mai populare fiind SASS. Mulți constructori folosesc în mod special SASS pentru proiecte mai mari și, împreună cu variabilele CSS ca element de bază, oferă multe opțiuni avansate.

Dacă ați mai lucrat cu preprocesoare, totuși, știți că acestea trebuie compilate pentru a scoate CSS-ul. Din acest motiv, acest tutorial se va concentra pe variabilele CSS și nu se va scufunda în detalii despre preprocesoare.

Variabilele CSS sunt un mediu fericit și, din fericire, există un suport puternic pentru browser. Înainte de a vă angaja să utilizați variabilele CSS în producție, asigurați-vă că verificați Pot folosi pentru a vă asigura că au suportul de care aveți nevoie.

Variabilele CSS sunt mai eficiente decât lucrul cu CSS simplu, dar nu necesită o configurare avansată precum SASS. Browserul face „compilarea” și nu depindeți de configurarea și mediul care scoate CSS-ul compilat.

Această abordare este un proiect potrivit pentru lucruri precum stilarea unor teme WordPress simple pentru copii. Pentru proiecte ca acesta, tinde să fie nevoie de actualizări de stil pentru a crea o temă de marcă. Variabilele CSS pot ajuta, deoarece oferă o listă gestionabilă de înlocuiri de stil și nu necesită un mediu special pentru compilarea SASS în CSS.

Obțineți teme Genesis Framework și StudioPress gratuit!

Clienții WP Engine au acces la o suită de teme premium WordPress care vine standard cu fiecare plan! Puteți începe să vă construiți următorul site pentru doar 20 USD/lună! Aflați mai multe aici.

Cum se utilizează variabilele CSS

Atunci când folosiți anumite culori pentru a rămâne pe marcă, o cerință comună este să aveți o paletă de culori a mărcii care poate fi folosită din nou și din nou. Devine redundant să tastați aceeași valoare de culoare de fiecare dată. În plus, ce se întâmplă dacă doriți să modificați una dintre valorile de culoare din set?

De exemplu, poate un albastru trebuie să fie puțin mai închis. Acest lucru se întâmplă tot timpul. Da, desigur, există găsește și înlocuiește de încredere. Ajustarea valorii într-un singur loc, totuși, este mai eficientă atunci când faceți această schimbare globală și pe măsură ce variabilele sunt reutilizate.

Iată cum arată o variabilă CSS :

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

Pe măsură ce eficientizez fluxul de lucru pentru stilarea unei teme copil WordPress, am adăugat variabilele în fișierul meu styles.css . Aceasta este doar „lista scurtă” și pe măsură ce se adaugă mai multe, denumirea eficientă a fiecărei variabile devine importantă.

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

Funcția var().

Cum sunt utilizate de fapt variabilele? Este destul de simplu. Mai întâi, variabila este declarată și apoi este utilizată în setul de reguli CSS necesar.

Domeniul de aplicare este un lucru important de care trebuie să fii conștient. Variabilele trebuie declarate într-un selector CSS care se încadrează în domeniul de aplicare prevăzut. În multe cazuri, veți avea nevoie de variabile pentru a fi disponibile în domeniul global, astfel încât acestea să fie accesibile tuturor. Puteți utiliza fie selectorul :root , fie selectorul body pentru domeniul global. Totuși, pot exista situații în care trebuie să limitați domeniul de aplicare și să doriți să lucrați cu o variabilă locală.

Este ușor de identificat variabile; au două linii înaintea lor. Cele două liniuțe (–) trebuie incluse.

Sintaxa var() este destul de simplă:

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

În loc să ajustați culoarea în mai multe locuri, valoarea variabilei este ajustată o singură dată.

Inspectorul web (Chrome în acest caz) vă permite să inspectați și să vedeți ce variabile sunt utilizate.

Următorul exemplu definește mai întâi proprietățile personalizate globale numite --light-gray și --text-black . Este apelată funcția var() , care inserează valoarea proprietăților personalizate mai târziu în foaia de stil:

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

Merită menționat că variabilele pot fi foarte utile atunci când lucrați cu puncte de întrerupere CSS. Prin utilizarea variabilelor cu scop global în diferite puncte de întrerupere, lucruri precum umplutura și alte stiluri utile pot fi personalizate pentru diferite dimensiuni.

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

Iată un exemplu de variabile care pot fi găsite în domeniul local. Am atins până acum doar domeniul global, așa că veți observa că lucrurile nu sunt la rădăcină. Acestea sunt stiluri pentru un mesaj de avertizare. Există o culoare de text de avertizare declarată aici, care este utilă numai pentru această clasă. De asemenea, este de remarcat faptul că calc poate fi utilizat și.

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

Exemplele de mai sus acoperă elementele de bază ale variabilelor CSS. Aceste concepte pot fi aplicate temelor WordPress personalizate sau oricărui alt CSS personalizat pe care îl scrieți. Variabilele au avantaje față de CSS simplu și vă vor ajuta să lucrați mai eficient atunci când faceți modificări la nivelul întregului site. Acestea permit foi de stil mai bine organizate fără a fi nevoie de un preprocesor.

Alimentați libertatea de a crea cu WP Engine

WP Engine oferă libertatea de a crea pe WordPress. Produsele companiei, cele mai rapide dintre toți furnizorii de WordPress, alimentează 1,5 milioane de experiențe digitale. Mai multe dintre primele 200.000 de site-uri din lume folosesc WP Engine pentru a-și alimenta experiențele digitale decât oricine altcineva din WordPress. Găsiți mai multe pe wpengine.com sau vorbiți cu un reprezentant astăzi!