Variabile în CSS

Variabile CSS

Inserarea valorii unei variabile CSS este sarcina funcției var().

Deoarece variabilele CSS au acces la DOM, domeniul lor poate fi local sau global, JavaScript le poate schimba, iar media queries le pot schimba și ele.

Culorile designului tău se potrivesc foarte bine aici. Pune fiecare culoare o singură dată într-o variabilă, în loc să o copiezi și să o lipești din nou și din nou.

CSS - Declararea unei variabile

O variabilă CSS are domeniu global sau local.

O variabilă globală poate fi accesată de oriunde din document, iar una locală funcționează doar în interiorul selectorului care o declară.

Pentru domeniu global, pune declarația în interiorul selectorului :root, care se potrivește cu elementul rădăcină al documentului.

Pentru domeniu local, pune-o în interiorul selectorului care o va folosi.

Numele încep întotdeauna cu două liniuțe (--), iar majusculele și minusculele contează ca fiind diferite!

Sintaxa declarării variabilei

Blocul :root conține o variabilă globală, iar un selector specific conține una locală.

:root {
  --primary-bg-color: green; /* global scope */
}

.note {
  --note-bg: yellow; /* local scope */
}

Funcția CSS var()

După ce o variabilă CSS a fost declarată, var() îi inserează valoarea.

Sunt posibile două argumente: numele variabilei, care este obligatoriu și începe cu două liniuțe, și o valoare de rezervă, care este opțională și intervine atunci când variabila nu poate fi găsită.

Lucrul cu var() aduce următoarele avantaje:

Întreținerea devine mai simplă, deoarece actualizările sunt mai ușoare
Codul se citește mai clar și este mai ușor de înțeles
Valorile de culoare de pe întreaga pagină sunt mai ușor de schimbat

Sintaxa var()

Cum se scrie var(): name trebuie specificat, în timp ce value este o valoare de rezervă opțională.

var(--name, value)

Exemplu de variabile CSS

Mai întâi sunt declarate două variabile globale, --primary-bg-color și --primary-color. Mai jos în foaia de stil, var() aduce valorile lor.

Variabile pentru tema albastră

Aici cele două variabile CSS globale conțin albastru și alb, iar var() transmite aceste valori elementelor body, container, titlu și notă.

Creați o pagină care declară două variabile CSS globale (--primary-bg-color ca #1e90ff și --primary-color ca #ffffff) în :root. Folosiți-le cu var() pentru a stiliza fundalul corpului, un container cu culoare de text, fundal, padding, un h2 cu o bordură inferioară și un div de notă cu o bordură și padding.

> Output: complete HTML page

Prompt

Creați o pagină care declară două variabile CSS globale (--primary-bg-color ca #1e90ff și --primary-color ca #ffffff) în :root. Folosiți-le cu var() pentru a stiliza fundalul corpului, un container cu culoare de text, fundal, padding, un h2 cu o bordură inferioară și un div de notă cu o bordură și padding.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables - Blue Theme</title>
<style>
:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
  font-family: Arial, sans-serif;
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}
</style>
</head>
<body>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <div class="note">
    <p><strong>Note:</strong> This is a note about something important.</p>
  </div>
  <p>This is some more text inside the container.</p>
</div>

</body>
</html>

Variabile pentru tema verde

Pentru a schimba stilul întregii pagini, este suficient să modifici doar aceste două valori ale variabilelor. Aici ele conțin verde și alb-floare.

Creați o pagină care declară două variabile CSS globale (--primary-bg-color ca #8FBC8F și --primary-color ca #FFFAF0) în :root. Folosiți-le cu var() pentru a stiliza fundalul corpului, un container cu culoare de text, fundal, padding, un h2 cu o bordură inferioară și un div de notă cu o bordură și padding. Aceasta demonstrează cum modificarea valorilor variabilelor schimbă întregul aspect.

> Output: complete HTML page

Prompt

Creați o pagină care declară două variabile CSS globale (--primary-bg-color ca #8FBC8F și --primary-color ca #FFFAF0) în :root. Folosiți-le cu var() pentru a stiliza fundalul corpului, un container cu culoare de text, fundal, padding, un h2 cu o bordură inferioară și un div de notă cu o bordură și padding. Aceasta demonstrează cum modificarea valorilor variabilelor schimbă întregul aspect.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables - Green Theme</title>
<style>
:root {
  --primary-bg-color: #8FBC8F;
  --primary-color: #FFFAF0;
}

body {
  background-color: var(--primary-bg-color);
  font-family: Arial, sans-serif;
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}
</style>
</head>
<body>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <div class="note">
    <p><strong>Note:</strong> This is a note about something important.</p>
  </div>
  <p>This is some more text inside the container.</p>
</div>

</body>
</html>

Funcția CSS var()

Pentru a insera valoarea unei variabile CSS, apelează var().