Ce sunt variabilele CSS și cum să le folosești

Publicat: 2022-02-16

Când scrieți codul CSS pentru site-ul dvs., puteți utiliza proprietăți personalizate (variabile) CSS pentru a accelera procesul de dezvoltare. Puteți folosi variabile pentru a defini proprietăți (dimensiune, culoare), care pot fi apoi aplicate mai multor elemente.

În acest fel, este posibil să aveți mai mult control asupra codului și designului. Modificarea valorii unei variabile într-un loc înlocuiește valoarea acelei proprietăți oriunde este invocată.

Această postare va explica cum să utilizați variabilele CSS și câteva aplicații practice.

Să începem!

Declararea unei variabile

Variabilele pot avea domeniu global sau local. Pentru a defini o variabilă la nivel global, utilizați selectorul :root.

 :root { --base-font-size: 1.1rem; }
DESCHIS ÎN POPUP
 :root { --base-font-size: 1.1rem; }

Selectorul :root se potrivește cu rădăcina documentului, adică <html> în cazul nostru particular.

Pentru a declara o proprietate personalizată CSS (variabilă), începeți cu două liniuțe (--). Variabilele sunt sensibile la majuscule, de exemplu:

--base-font-size și --Base-Font-Size sunt două variabile diferite.

Pentru a defini o variabilă local, utilizați selectorul elementului în care doriți să utilizați variabila.

 #first-container { --background: #ccc; }
DESCHIS ÎN POPUP
 #first-container { --background: #ccc; }

Odată ce ați definit variabila, este necesar să o invocați.

Funcția var().

Funcția var() este utilizată pentru a insera valoarea variabilei CSS definite. Funcția se înlocuiește cu valoarea variabilei. Să aruncăm o privire la un exemplu:

Codul HTML

  • Copiați și inserați acest cod în editorul dvs. de cod.
  • Salvați fișierul ca index.html .
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
DESCHIS ÎN POPUP
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>

Ce sunt variabilele CSS și cum să le folosești

Codul CSS

  • Creați un fișier numit style.css (în același director cu index.html ).
  • Lipiți codul de mai jos și salvați fișierul.
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }
DESCHIS ÎN POPUP
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }

Ce sunt variabilele CSS și cum să le folosești

Sunt câteva lucruri de observat aici:

  1. Crearea unei palete de culori este un proces simplu.
  2. Este posibil să utilizați o variabilă în definiția altei variabile, cum ar fi culoarea în definiția variabilelor de frontieră.
  3. Variabilele sunt moștenite, proprietatea de culoare a elementului .container-* afectează copiii direcți. În acest caz, elementul <p>.

Pentru a suprascrie o variabilă, o declarați în interiorul containerului său, făcând-o mai specifică.

  • Editați codul CSS:
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }
DESCHIS ÎN POPUP
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }

Ce sunt variabilele CSS și cum să le folosești

Variabile și interogări media

Variabilele pot fi, de asemenea, moștenite și suprascrise în interogările media CSS.

  • Adăugați acest cod la variabile:
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }
DESCHIS ÎN POPUP
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }

Am definit o lățime de bază pentru elementul de înveliș. Acum putem aplica aceste variabile proprietății .wrapper width.

  • Adăugați acest cod la sfârșitul fișierului CSS:
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }
DESCHIS ÎN POPUP
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }

Ce sunt variabilele CSS și cum să le folosești

Pentru a defini o interogare media pentru dispozitivele cu ecrane mai mici de 1100px lățime, scriem următoarea interogare media.

  • Editați codul CSS:
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
DESCHIS ÎN POPUP
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }

Ce sunt variabilele CSS și cum să le folosești

Ce sunt variabilele CSS și cum să le folosești

Noua definiție a variabilei din interogarea media suprascrie valoarea acesteia. Observați, de asemenea, că variabila este disponibilă în DOM, ceea ce înseamnă că poate fi preluată și manipulată cu JS. Acest lucru nu este posibil cu variabilele din preprocesoarele CSS.

rezumat

Variabilele sunt utile pentru a organiza și gestiona cantități mici și mari de CSS. Acestea reduc repetarea și, prin urmare, previn greșelile. Variabilele CSS sunt dinamice, adică pot fi modificate în timpul de execuție. Este ușor să temați dinamic un site sau o aplicație cu variabile CSS. Ele oferă posibilitatea de a atribui valori unei proprietăți CSS cu un nume personalizat. Variabilele urmează regulile standard în cascadă, astfel încât este posibil să se definească aceeași proprietate la diferite niveluri de specificitate.

Sper că v-a plăcut acest tutorial. Multumesc pentru lectura!