Înțelegerea variabilelor CSS (și modul de utilizare a acestora)

Publicat: 2025-07-13

Variabilele CSS sunt ca ingrediente de design reutilizabile. Le definiți o dată, ca culorile mărcii dvs., dimensiunile fontului sau distanțarea, apoi le folosiți oriunde este nevoie. Te salvează de la tastarea acelorași coduri hexagonale și valori de pixeli în diferite secțiuni.

Cel mai mare beneficiu al acestora este cât de ușor sunt de actualizat. Dacă actualizați o variabilă o dată, fiecare loc în care este folosit va reflecta și modificările. Deci, nu numai că evitați repetarea manuală a acelorași valori pe mai multe secțiuni, dar puteți regla și aspectul întregului site web schimbând doar o valoare.

Iată unde se îmbunătățește și mai bine: cu Divi 5, nu trebuie să scrieți niciun cod pentru a utiliza variabilele CSS. Variabilele de design ale Divi vă permit să le utilizați într-un flux de lucru vizual, fără cod. Curios cum funcționează? Continuați să citiți.

Cuprins
  • 1 Care sunt variabilele CSS?
    • 1.1 Cum funcționează variabilele CSS
    • 1.2 Înțelegerea variabilelor CSS Cascadă
    • 1.3 Adăugarea unei valori de retragere
  • 2 Un mod fără cod de a utiliza variabilele CSS în Divi 5
    • 2.1 Definiți variabilele CSS în Divi 5
  • 3 Cum Divi 5 face fluxuri de lucru variabile CSS
    • 3.1 1. Creați -vă cadrul de proiectare
    • 3.2 2. Utilizați presetări de grupuri de opțiuni pentru un stil flexibil
    • 3.3 3. Declarați variabilele CSS personalizate pentru mai mult control
  • 4 Divi oferă o abordare încorporată pentru variabilele CSS

Ce sunt variabilele CSS?

Gândiți -vă la variabilele CSS ca la etichete personalizate pe care le creați pentru propriile obiceiuri de design. Care este raza ta de frontieră pentru imagine? Câtă distanțare lăsați de obicei între secțiuni? Aveți o culoare de buton de semnătură pe care o utilizați peste tot? Puteți transforma toate aceste stiluri unice în variabile CSS.

Acestea nu sunt valori pe care browserul le cunoaște în mod implicit. Totul este personalizat. Decideți numele, atribuiți valoarea preferată și o utilizați oriunde doriți. Este ca și cum ai crea propria ta scurtătură care face ca stilul să fie mai rapid, mai curat și să fie mai ușor de actualizat mai târziu.

Să luăm un exemplu. Să presupunem că doriți ca culoarea principală a site -ului dvs. să fie #007BFF. Ai declara -o așa:

:root {
--primary-color: #007bff;
}

Aici, „–primary-color” este numele dvs. variabil, iar „#007bff” este valoarea sa. Tocmai ai stocat o culoare într -o etichetă personalizată pe care browserul o poate recunoaște acum.

Pentru a -l folosi, nu rescrieți codul hex. Apelați variabila în funcția var () ca aceasta:

 button {
background-color: var(--primary-color);
}

Acea linie de cod vă asigură că butonul scoate întotdeauna valoarea de la-primar-color.

Acum, îl puteți folosi oriunde este nevoie, iar când este timpul să vă actualizați culoarea mărcii, nu este nevoie să săpați zeci de fișiere. Schimbați variabila o dată și fiecare element în care este utilizat este actualizat automat. De exemplu, butoanele, rubricile și marginile dvs. folosesc toate-mai color. O singură editare le actualizează pe toate.

Așa se simplifică actualizările la nivel de site.

Cum funcționează variabilele CSS

Pentru a declara o variabilă CSS, sintaxa de bază arată astfel:

.root {
--name: value;
} 

Câteva lucruri de remarcat. În primul rând, o variabilă CSS începe întotdeauna cu două liniuțe ( -). Așa știe browserul că este personalizat, lucru pe care l -ați definit pentru sistemul dvs. de proiectare.

Proprietățile CSS încorporate, cum ar fi dimensiunea fontului, culoarea sau căptușeala au deja sens. Browserul știe exact ce să facă cu ei. Dar proprietățile personalizate sunt etichete goale până când le atribuiți o valoare. Vă creați propriile reguli de proiectare într-un proiect de site, cum ar fi-primar-culori și spuneți browserului ce înseamnă.

În cazul în care vă definiți variabilele CSS face, de asemenea, o mare diferență.

Când îl așezați în interiorul: selectorul de rădăcină (așa cum am făcut mai sus), acesta devine global. Asta înseamnă că puteți utiliza variabila pe orice pagină și element. Asta pentru că: Root vizează elementul de nivel superior al HTML-ului dvs., de obicei eticheta <HTML>.

Dar dacă definiți aceeași variabilă în interiorul unei anumite clase sau selector, funcționează doar într -un singur loc. Ca aceasta:

 .card {
--bg-color: #f4f4f4;
} 

Aici, –BG-Color se aplică numai în interiorul selectorului .Card. Încercați să îl utilizați în altă parte și nu va apărea. De exemplu, mai jos veți vedea două cărți.

Variabila CSS declarată local

Cardul 1 folosește o variabilă definită local-CARD-BG declarată în recipientul .Card. Această variabilă funcționează doar în interiorul acelui container. Nu se aplică în cardul 3.

Variabila CSS definită local nu va funcționa pe alte containere

Cartea 2, pe de altă parte, își trage fundalul de la –global-culor, care este definit în: rădăcină. De aceea, Card 4 ridică aceeași culoare. Are acces la variabila globală.

Root CSS Variable Works

Ca cea mai bună practică, dacă doriți consecvență pe întregul dvs. site, definiți întotdeauna valorile CSS în: Root. Ce se întâmplă dacă ați definit o variabilă la nivel local și ați uitat de ea, dar acum nu funcționează așa cum era de așteptat? Veți depanarea acest lucru prin setarea unei valori de revenire. Vom vorbi despre asta într -o vreme.

Înțelegerea variabilelor CSS în cascadă

S -ar putea să fiți familiarizați cu termenul „Cascade”. Ei bine, variabilele CSS și în cascadă, dar ce înseamnă asta?

Dacă o variabilă este definită atât la nivel global (în: rădăcină), cât și la nivel local (în interiorul unei clase sau a unui container), browserul va folosi întotdeauna cel mai aproape de element. Așa funcționează cascada în CSS. Regulile mai apropiate au prioritate.

Și exact așa funcționează modul întunecat.

De exemplu, s-ar putea să definiți –Text-Color: Black In: Root. Dar în interiorul unui recipient cu mod .Dark, îl puteți redefini ca alb. Așadar, atunci când utilizatorul se transmite opțiunea de modul întunecat, browserul va folosi versiunea locală din interiorul .dark-mod, chiar dacă numele variabilului rămâne același.

Exemplu de mod întunecat

Acest lucru vă permite să vă mențineți denumirea în timp ce reglați stilurile pe baza contextului. Este o modalitate prin care variabilele CSS depășesc reutilizarea simplă. Se adaptează pe baza unde și cum sunt folosite.

Adăugarea unei valori de retragere

Uneori, puteți face referire la o variabilă CSS care nu este disponibilă. Poate că a fost definită doar într -o anumită secțiune sau a fost eliminată din greșeală. Când se întâmplă asta, browserul nu știe ce să facă. Stilurile care depind de acea variabilă pur și simplu nu vor fi aplicate.

Puteți adăuga o valoare Fallback direct în funcția var () pentru a preveni asta. Acesta servește ca o copie de rezervă în cazul în care variabila inițială lipsește. Iată cum funcționează:

 h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} 

Acest lucru spune browserului să folosească-color-color dacă există. Dacă nu, folosiți în schimb Black (#000).

Fallback -urile sunt utile în special atunci când construiți componente reutilizabile sau lucrați în mai multe secțiuni în care variabilele ar putea să nu fie întotdeauna disponibile. Îți păstrează designul stabil și consecvent.

Puteți chiar lansa căderi, cum ar fi culoarea: var (–accent, var (–primar-color, #333));

Aici, browserul verifică mai întâi-mai întâi de culoare. Dacă lipsește, încearcă-mai mult de culoare. Dacă lipsește și asta, acesta este implicit pe #333. Acest lucru oferă stilurilor tale o plasă de siguranță, astfel încât acestea să continue să redea corect, chiar dacă lipsesc unele valori.

O modalitate fără cod de a utiliza variabilele CSS în Divi 5

Tot ceea ce ați văzut despre variabilele CSS (controlul global, valorile reutilizabile, logica în cascadă) sună excelent, dar vine și cu o captură: trebuie să scrieți și să gestionați codul. Pentru mulți designeri, acest lucru nu este ideal. Ce se întâmplă dacă preferați designul vizual? Asta înseamnă că nu puteți utiliza variabile CSS, nu? Greşit.

Divi 5 vă oferă un mod mai rapid, mai vizual de a lucra cu aceeași logică a variabilelor CSS. Introduce variabile de design, o alternativă fără cod la variabilele CSS construite chiar în Divi Builder.

Abonați -vă la canalul nostru YouTube

Variabilele de proiectare ( cum ar fi variabilele CSS) sunt valori reutilizabile pe care le definiți o dată și le utilizați pe site -ul dvs. Ceea ce este diferit este cum o faci. Nu le definiți în foaia de stil a site -ului dvs. web, ci în Variable Manager în Divi Builder, vizual.

Manager variabil în Divi 5

Ca și variabilele CSS, dați unui nume de design un nume și atribuiți o valoare. Odată salvat, acesta devine disponibil în orice modul care acceptă acea proprietate.

Aplicarea variabilei salvate este, de asemenea, ușoară. Doar localizați pictograma managerului variabil , trecând peste opțiunea de setări a modulului, făcând clic pe ea pentru a popula toate variabilele salvate și alegerea celei pe care doriți să o aplicați.

Cea mai bună parte a variabilelor de design este că nu doar valorile de proiectare, dar puteți salva, de asemenea, valori de conținut repetabile, cum ar fi imagini, link -uri și șiruri de text. În acest fel, gestionați în mod eficient conținutul repetat prin reutilizarea elementelor de conținut comune pe site -ul dvs. web fără muncă manuală.

Salvați valorile de conținut repetabile în variabilele de proiectare

Aflați totul despre variabilele de design Divi 5

Definiți variabilele CSS în Divi 5

Aceasta înseamnă că variabilele de proiectare înlocuiesc variabilele CSS? Nu exact.

Variabilele de design sunt excelente pentru stocarea valorilor pe care le utilizați des, cum ar fi culorile mărcii, dar nu orice stil trebuie să fie global. Nu veți dori întotdeauna să salvați fiecare modificare minoră ca o variabilă de proiectare, mai ales atunci când este unică pentru o singură pagină.

Să spunem că creați o pagină de destinație cu o secțiune de eroi personalizate. Înălțimea diferă de orice altceva de pe site și este puțin probabil să o reutilizați. Economisirea acesteia ca variabilă de proiectare nu este cea mai bună utilizare a bibliotecii dvs. globale. În acest caz, definirea unei variabile CSS direct în setările paginii este o alegere mai curată.

Același lucru este valabil și pentru machete complexe sau unice. Poate că aveți nevoie de o culoare personalizată de evidențiere sau o valoare de distanțare specifică aspectului, care este relevantă doar în acel context. În loc să vă aglomerați sistemul cu variabile nu veți reutiliza niciodată, puteți defini variabilele CSS chiar acolo unde aveți nevoie de ele.

Nu dorim să înlocuiți variabilele CSS cu variabile de proiectare. Vrem să folosiți tot ce este mai bun din ambele.

De aceea, Divi 5 face ușor definirea variabilelor CSS. Puteți declara cu ușurință propriile variabile CSS în setările paginii> avansate> CSS personalizate , la fel cum ați face în CSS obișnuit.

Definiți variabilele CSS în Divi 5

Dar simplificăm aplicația lor pentru dvs. Odată definit, puteți utiliza aceste variabile pe această pagină. Accesați orice modul, alegeți CSS VAR din meniul derulant al unităților avansate și introduceți numele variabil în funcția var ().

Această abordare vă oferă flexibilitate atunci când este nevoie, fără a vă forța să comiteți totul la sistemul variabil de design vizual. Este un echilibru între structură și libertatea creativă.

Utilizarea variabilelor CSS în Divi 5

Cum Divi 5 face fluxurile de lucru variabile CSS fără efort

Acum că știți care sunt variabilele CSS și cum le susține Divi 5 vizual, iată de ce contează cu adevărat acest lucru. Nu este doar pentru că Divi vă oferă două moduri de a utiliza variabilele CSS. Se datorează faptului că îi face să se integreze fără probleme cu fluxul de lucru.

Puteți utiliza cu ușurință variabile CSS cu caracteristici puternice, cum ar fi variabile de design, presetări de grupuri de opțiuni și unități avansate. Încă mai obțineți toată flexibilitatea și scalabilitatea CSS tradițională, dar fără a scrie o singură linie de cod decât dacă alegeți.

Să parcurgem modul în care Divi 5 aduce acest flux de lucru la viață.

1. Creați -vă cadrul de design

Variabilele de design sunt cu adevărat puternice, deoarece puteți construi întregul cadru de design vizual, astfel încât stilul unei pagini necesită doar câteva clicuri. Vă recomandăm să începeți cu elementele dvs. de design de bază, cum ar fi dimensiunile fonturilor, unitățile de distanțare și culorile mărcii, astfel încât să le aveți pe toate într -un singur loc.

Apoi, puteți salva, de asemenea, conținut utilizat frecvent, cum ar fi șiruri de text, adrese URL și imagini. De exemplu, un motiv de fond comun care se repetă în diferite secțiuni, link -uri de social media, e -mail, adresă etc.

După ce aveți cadrul dvs. în loc, totul devine mai ușor. Nu trebuie să vă întoarceți la o foaie de stil root pentru a găsi o variabilă sau amintiți -vă de nume exacte. Divi le organizează pentru tine: culori în fila Color , fonturi din fila Font și toate accesibile în interiorul managerului variabil .

Variabilele salvate sunt organizate bine în manager variabil

Și atunci când site -ul dvs. are nevoie de o actualizare a proiectării, nu veți pierde modul de editare a timpului prin modul sau vânătoare printr -o foaie de stil lungă. Veți actualiza valoarea salvată în managerul variabil o dată, iar modificările dvs. se aplică instantaneu pe fiecare instanță.

Același control la nivel de CSS, dar fără a fi nevoie să memoreze, să scrie sau să depanim nimic.

2. Utilizați presetări de grupuri de opțiuni pentru un stil flexibil

Presetările de grupuri de opțiuni vă oferă un control mai detaliat asupra sistemului dvs. de proiectare. În loc să aplici un singur set de stiluri pe site -ul tău, puteți crea mai multe grupuri de opțiuni de design pentru diferite cazuri de utilizare, toate construite din aceleași variabile de design de bază.

Aici, ești stiluri de stratificare. Vă definiți valorile de bază o dată în managerul variabil, apoi creați presetări diferite care trag din aceste valori, dar le aplicați în moduri ușor diferite. Dacă ați actualizat vreodată o valoare variabilă salvată, modificarea reflectă instantaneu pe toate presetările și modulele în care sunt aplicate.

Acest sistem de proiectare bazat pe presetare vă ajută să creați combinații de stil nelimitate. De exemplu, s -ar putea să aveți un stil de rubrică pentru eroul dvs. din pagina de pornire și altul pentru titluri de blog, ambele folosind aceeași variabilă de dimensiune a fontului, dar cu distanțare diferită, greutăți sau transformări de text.

Structura rămâne curată. Stilul rămâne consecvent. Și atunci când este nevoie, puteți înlocui orice prestație la nivelul modulului. Așadar, obțineți un control la nivel de sistem fără a pierde libertatea creativă.

3. Declarați variabilele CSS personalizate pentru mai mult control

După cum știți, Divi nu vă blochează de control avansat. Dacă doriți să definiți propriile variabile CSS, puteți face acest lucru prin setări de pagină> Advanced> CSS personalizat. Dar asta nu este partea distractivă.

Ceea ce este distractiv este că vă permite să utilizați funcții CSS puternice precum Clamp () și Cal () (datorită unităților avansate) pentru a construi vizual machete fluide, receptive. Puteți utiliza, de asemenea, variabilele CSS salvate ca valori pentru variabilele dvs. de proiectare.

Acest lucru vă ajută să construiți un sistem de proiectare mai interconectat. Logica dvs. CSS și stilul vizual nu mai există în silozuri separate. Puteți defini o valoare o dată în CSS și trageți din ea vizual oriunde este nevoie. Îți păstrează fluidul fluxului de lucru, scalabil și ușor de întreținut.

S -ar putea să găsiți totul copleșitor, dar, odată ce înțelegeți cum funcționează împreună, nu se va întoarce. Schimbă modul în care proiectați, gândiți și construiți. Ceea ce începe ca un sistem de variabile devine rapid limbajul dvs. de proiectare. Și da, aceste instrumente sunt puternice, dar sunt menite să fie modelate în jurul procesului tău. Luați -vă timp, explorați ceea ce se potrivește stilului dvs. și construiți un flux de lucru care să funcționeze pentru dvs.

Divi oferă o abordare încorporată pentru variabilele CSS

Proiectarea cu variabile CSS utilizate pentru a însemna alegerea între flexibilitate și complexitate. Divi 5 șterge asta și aduce întreaga putere de variabile, control vizual, actualizări la nivel de site și logică stratificată într-un flux de lucru intuitiv și scalabil.

Nu trebuie să alegeți între CSS personalizat și designul fără cod. Puteți amesteca, potrivi și evolua sistemul dvs. pe măsură ce proiectele dvs. cresc. Și odată ce vedeți cât de lină și puternică poate fi acest lucru, este greu de imaginat construind alt mod. Dar pentru asta, trebuie să preiați controlul în mâinile voastre.

Încercați Divi 5 pentru dvs. și construiți un sistem de proiectare care funcționează cu dvs., nu împotriva voastră.

Descărcați Divi 5Learn mai multe despre Divi 5