Cum să configurați site-ul cu variabile CSS

CSS Proprietăți personalizate, cunoscute în mod obișnuit ca variabile CSS, sunt acum acceptate de toate browserele moderne majore. Aceasta înseamnă că, pentru proiectele care nu sunt împovărate de faptul că trebuie să sprijine browserele moștenite, cum ar fi Internet Explorer, pot fi luate în considerare variabilele CSS - pentru toate intențiile și scopurile - sigur de utilizat.

Mulți dezvoltatori folosesc deja variabile cu preprocesoare, cum ar fi SASS sau Mai puțin ca mijloc de reducere a repetării codului. Variabilele CSS native lucrează în mare măsură în același mod, dar nu necesită nici un pas suplimentar de construire, cascadă ca o proprietate CSS obișnuită și, cel mai important, la Runtime. (Pentru a vă menține site-ul fără probleme, asigurați-vă că ați ales dreptul web hosting serviciu.)

• Ce este SASS?

Aceste beneficii oferă variabilelor CSS native o margine față de frații lor preprocesor și deschide ușa dezvoltatorilor pentru a face multe lucruri interesante cu mult mai puțin cod. Interesați de opțiunile de cod zero pentru site-ul dvs.? Iată ghidul nostru pentru partea de sus Builder de site-uri web .

În acest tutorial, vom explora modul în care putem folosi variabilele CSS pentru a implementa site-ul Întâlnit într-o aplicație Web Mock numit Notepp. Aceasta va implica scrierea Css. și JavaScript. Pentru a permite utilizatorului să modifice schema de culori și să comute cantitatea de coloane afișate. Apoi vom folosi API-ul de stocare web pentru a vă asigura că orice modificări sunt salvate pentru sesiunile viitoare.

Obțineți fișierele Tutorial

Primele lucruri mai întâi, descărcați fișierele de proiect de la Fișier de fișiere Web Designer (Ediția 264). NOTĂ: Utilizatorii de prima dată vor trebui să se înregistreze pentru a utiliza Filesilo.

01. Configurați spațiul de lucru

În / șablon de site-uri web Director Veți găsi pagina web statică Notepp în care vom implementa site-ul web care utilizează variabilele CSS și API-ul de stocare web. Deschideți directorul din editorul de text preferat.

02. Configurați variabilele noastre CSS

În Main.css. , veți găsi o mare parte din CSS-ul proiectului. În partea de sus, creați un bloc care vizează rădăcină pseudo-clasa. În interiorul acesteia definesc variabilele ca în fragmentul de mai jos. Acest bloc de rădăcină conține variabile globale care vor cascada prin stilul nostru ca orice proprietate CSS obișnuită.

: root {
  - Primar: # 2F353E;
  - secundar: # 2b9bca;
  --Tertieră: # F3583F;
  - Cuzeternari: # E0E1E2;
  -: #FFFFFF;
} 

03. Înlocuiți culorile cu variabilele

Treceți prin stilul de stil, fie manual, fie folosind Găsiți / înlocuiți și schimbați orice coduri de culori statice cu variabila lor corespunzătoare din blocul rădăcină. Pentru a face acest lucru, utilizați var. Funcționați și treceți numele variabilei. Acest lucru spune browserului să se refere la valoarea acelei variabile. De exemplu:

 .C-Header {
  fundal-culoare: var (- primar);
  Culoare: var (- quinary);
} 

04. Localizați SVG inline pentru icoane

Deschis index.html. Și unul dintre primele lucruri pe care le observați este un element mare de SVG. Aceasta conține căile pentru toate pictogramele paginii, fiecare învelit într-un element de simbol și având un ID unic. Aceste simboluri sunt apoi menționate dacă este necesar cu utilizare Element, permițând reutilizarea pictogramelor fără nici o dublare a codului SVG.

05. Adăugați variabile CSS la SVG

Un beneficiu al utilizării SVG inline în loc de un fișier .SVG este că CSS poate accesa structura sa internă. Acest lucru înseamnă că variabilele noastre CSS (verificați suportul browserului Aici ). În index.html. , înlocuiți blocul de stil al SVG cu fragmentul de mai jos. Acum, fiecare dintre culorile SVG sunt legate de valorile variabilelor noastre CSS.

 & stil & gt;
  .PRIMARY {
  umple: var (-prins, # 2f353e);
  }
  .Secondary {
  umple: var (-secundar, # 2b9bca);
  }
& lt; / stil & gt; 

06. Creați o variabilă a coloanelor

De asemenea, putem folosi variabile CSS pentru alte proprietăți decât culoarea. Creați o variabilă nouă în blocul rădăcinii, apelați-l coloane , și dă-i o valoare de 3. Acest lucru ar trebui să se potrivească cu valoarea implicită a Coloane UI componenta pe pagină. Când este funcțional, această componentă va comuta numărul de coloane.

: root {
  - Primar: # 2F353E;
  - secundar: # 2b9bca;
  --Tertieră: # F3583F;
  - Cuzeternari: # E0E1E2;
  -: #FFFFFF;
  --Columns: 3;
} 

07. Implementați o coloană de comutare

Folosind variabila noastră nouă coloane și Calc () Funcția, vom calcula acum cât de mare ar trebui să fie fiecare componentă notă pentru a crea numărul corect de coloane. De exemplu, dacă coloanele sunt setate la 4, fiecare notă ar trebui să aibă o lățime de 25%.

 .c-note {
  Lățime: Calc (100% / VAR (coloane));
} 

08. Adăugați clasele JS și atributele de date

Când aplicați comportamentul JS la un element DOM, cârlig în ea printr-o clasă cu un prefix JS. Acest lucru decuplează aspectele funcționale ale unui element de la cele CSS. Să adăugăm a JS-Actualizare-variabila clasa la toate intrările de culoare și radio, precum și a Atributul de date referindu-se la actualizarea variabilei corespunzătoare.

 & lt; Intrare tip = "culoare" valoare = "# 2f353e"
Clasa = "JS-Actualizare-variabila U-Hidden-vizual"
Data-variabil = "primar" & gt; 

09. Adăugați JS pentru a actualiza variabilele CSS

Deschis Main.js. și adăugați fragmentul de mai jos. Acest bucle prin toate noastre JS-Actualizare-variabila Intrări și adaugă logica, așa că la schimbare, variabila menționată în atributul de date-variabilă este actualizată cu valoarea intrărilor. Swatchesul de culoare și comutarea coloanei ar trebui să funcționeze acum!

 Var Vartrig = document
.querySelectoral ("JS-Actualizare-variabilă");
pentru (var i = 0; i & lt; vartrig.length; i ++) {
Vartrig [i]
.Addeventlistener ("schimbare", funcția () {
document.documentellement.style.
.setproperty ("-" + the.Dataset.variable,
acest valvalue);
});
} 

10. Atașați o clasă JS la butonul de salvare

Este logic să salvați numai schema de culori a utilizatorului atunci când faceți clic pe butonul Salvare, deoarece acest lucru le permite să experimenteze cu teme cât de mult ar dori, fără ca acestea să depășească automat celulele curente. Pentru a începe, adăugați .js-salvați-culori la. Salvați butonul pentru a funcționa ca cârligul nostru JS.

 buton clasa = "c-buton js-salvare-culori"
DATA-MODAL = "JS-Modal" Date-modal
-content = "JS-Culori-Modal-Content" & GT;
Salvați & Lt; / buton & gt; 

11. Creați matrice culorilor

Înapoi în Main.js. , declarați o nouă variabilă numită Culori Și atribuiți-o o nouă matrice care conține toate variabilele de culori pe care vrem să le economisesc odată ce butonul de salvare a fost făcut clic.

 VAR CULORI = [
  "primar",
  "secundar",
  "terţiar",
  "Quaternary",
  "Quinkin"
]; 

12. Build Button Button Eveniment ascultător

Sub matricea culorilor, creați un ascultător de evenimente pentru a face clic pentru js-salvare-culori clasa pe care am adăugat-o anterior la butonul de salvare. În interiorul ei creează o nouă variabilă numită htmlstyles. și atribuiți-o proprietățile computerizate ale elementului HTML rădăcină. Vom folosi acest lucru pentru a accesa variabilele noastre CSS.

 Document.QuerySelector ("JS-Save-Culori")
.Addeventlistener ("clic", funcția () {
var htmlstyles = fereastră
.GetComplutestyle (document.
.QuerySelector ("HTML")),
}), 

13. Înregistrați variabilele CSS Color

În continuare, în cadrul evenimentului ascultător, creați o nouă variabilă numită Colorstosave. și atribuiți-i un obiect gol. Apoi, creați o PENTRU buclă folosind. Culori matrice din pasul 11. În cadrul acesteia, vom adăuga o înregistrare cheie / valoare completă a variabilelor menționate în Culori Array la. Colorstosave. obiect.

 Array la obiectul "colourstosave".
Colorstosave = obiect nou;
pentru (var i = 0; I & lt; colors.length; i ++) {
Colorstosave [Culori [I]] = HTMLSTYLES
.GetPropertyValue ("-" + culori [i]);
} 

14. Trimiteți Colorstosave la localist

Acum avem toate variabilele de culoare salvate Colorstosave. , o vom trimite la o componentă a API-ului de stocare web numit localist. Acesta este, în esență, un obiect care persistă între sesiuni. Putem stoca alte obiecte în interiorul acesteia folosind sale SetITEM () metodă. Să-i trimitem Colorstosave. obiect.

 LocalStorage.SetITEMM ("Culori",
JSON.Stringfy (Colorstosave); 

15. Adăugați o clasă JS la coloane

În plus față de culori, dorim, de asemenea, să ne asigurăm că numărul coloanelor alese persistă, de asemenea, pe sesiuni. Primul pas spre acest lucru ar fi de a adăuga JS-Actualizare-coloane la toate intrările radio din cadrul componentei coloanelor.

 & lt; intrare tip = "radio" nume = "Columns" Clasa
= "JS-Actualizare-Variable-Coloane
u-ascunse-vizual "valoare =" 1 "
Data-variabil = "coloane" & gt; 

16. Trimiteți coloane la localist

Pentru fiecare JS-Actualizare-coloane , vom urmări ascultătorii evenimentului să urmărească schimbări. La detectare, vom trimite apoi valoarea curentă a coloane variabilă la LocalStorage. , din nou, folosindu-l SetITEM () metodă. Spre deosebire de culori, nu avem nevoie să strângem această valoare deoarece nu este un obiect.

 Var Colinputs = Document
.QuerySelectoral ("JS-Actualizare-coloane");
pentru (var i = 0; i & lt; colinputs; i ++) {
Colinpus [i] .Addeventlistener ("schimbare",
Funcție () {var htmlstyles = fereastră
.GetComplutestyle (document.
.QuerySelector ("HTML");
LocalStorage.SetITEM ("Coloane",
htmlstyles.getpropertyvalue ("- coloane");
});} 

17. Gestionați sesiunile noi

Dacă utilizatorul revine după alegerea anterioară a unei preferințe de culoare și coloană, trebuie să construim logica, astfel încât aceste date salvate să fie întoarse în variabile CSS. Primul pas este de a defini o Domcontentenload. Evenimentul ascultătorului și apoi un dacă Declarație pentru a verifica orice date salvate în localist getitem () metodă.

 document.addeventlistener
("Domcontentenload", funcția () {
dacă (localStrage.getitem ("culori") {
}
dacă (localStrage.getitem ("coloane")) {
}
}); 

18. Modificarea variabilelor de culoare

În culori dacă declarație, creați o nouă variabilă numită Savedcolours. și atribuiți-i valoarea unui obiect de culori parsate de la LocalStorage. . Folosind un Pentru in buclă cu Savedcolours. , apucați fiecare pereche de cheie / valoare de culoare și adăugați-o la elementul HTML rădăcină ca o variabilă CSS.

 Var savedcolours = json.parse
(localStrage.getitem ("culori"));
pentru (culoarea în savedcolours) {
document.documentelement.style.setproperty.
("-" + culoare, savedcolours [culoare]); } 

19. Adunați date despre variabile de coloană

Înainte de a putea modifica variabila coloanelor, trebuie să luăm primele referințe la datele salvate din LocalStorage. și, de asemenea, intrările radio în cadrul Coloane componentă. Acesta din urmă este astfel încât să putem actualiza starea sa pentru a vă asigura că numărul corect este pre-selectat.

 VAR Coloane = LocalStatorage
.getitem ("coloane"),
columntriggers = document.
QuerySelectoral ("JS-Update-coloane"); 

20. Se modifică variabila și statul

În cele din urmă, vom actualiza variabila CSS a coloanelor cu salvarea sa LocalStorage. contrapartide și setați atributul verificat al intrării radio relevante în cadrul Coloane componentă la adevărat. Coloane - 1. este de a compensa faptul că coloanele Nodelist. este bazată pe zero.

 document.documentelement.style
.setproperty ("- coloane", coloane);
columnriggers [coloane - 1] .checked = true; 

21. Testați produsul finit

Asta este! Totul pe pagina Mock Notepp ar trebui să funcționeze acum. Puteți crea propria schemă de culori făcând clic pe swatches și apoi să-l angajați LocalStorage. prin intermediul butonului Salvare. Dacă doriți să comutați cantitatea de coloane afișate, faceți clic pe numărul corespunzător din componenta coloanelor.

Și amintiți-vă, merită întotdeauna să vă îmbunătățiți Stocare in cloud Înainte de un nou proiect, astfel încât să se poată gestiona fișierele pe care le aruncați la ea.

Acest articol a apărut inițial în revista Web Designer Problema 264. Abonați-vă aici .

Citeste mai mult:

• 15 Tutoriale utile utile responsabile de design web
• Cum să începeți cu SASS
• 7 sfaturi pentru a gestiona mai bine culoarea pe web