Le variabili in CSS

Lo sviluppo web sta diventando sempre più complesso ed articolato, così come i fogli di stile, i CSS che nascevano con poche specifiche per poche esigenze mentre oggi ricoprono un ruolo fondamentale per la realizzazione di software front-end dalle complesse interfacce UI/UX sia per browser che app, persino nelle più comparsate GUI desktop come JavaFX per Java o Windows Presentation Foundation per C#/.NET.

Perché usare le variabili

Una funzionalità molto utile anche per lo studente alle prime armi, è quella di poter utilizzare le variabili all’interno del CSS. Questo permette di scrivere codice pulito e facile da mantenere, molto orientato alla realizzazione di template customizzabili con pochi click.

Pensiamo ad un sito web che presenta un font per il titolo, per il corpo del testo e tutta una serie di colori che caratterizzano magari il brand del nostro sito. Se volessimo cambiarli, dovremmo andare a spulciare tutti i vari selettori dove sono riportati e sostituirli uno per uno. In un CSS articolato, questa operazione potrebbe essere particolarmente complessa. Il programmatore in erba invee magari ricorda come col C++ o il Java si sia soliti definire le variabili con cui si lavora in alto, nel nostro software, in modo tale da poter tenere monitorato e modificare eventuali valori iniziali o costanti a seconda delle necessità.

Come utilizzare le variabili

Con i fogli di stile possiamo realizzare qualcosa del genere. Osserviamo il seguente frammento di codice. Definiamo alcuni stili globali. Nella stragrande maggioranza dei casi sono font o colori che sappiamo voler ripetere in svariati selettori e che quindi fa particolarmente comodo avere un nome mnemonico ed indicativo del suo utilizzo. Ad esempio qui i colori di sfondo, dei titoli, del testo e il font di default degli articoli. Li definiamo all’interno di un selettore :root{}. Ogni variabile è costituita sa un singolo nome con trattini alti o bassi ma preceduta tassativamente dal doppio trattino –qualcosa

:root 
{
  --colore-sfondo: lightblue;
  --colore-titolo: #262626;
  --colore-testo: #525252;
  --font: "Arial", sans-serif;
}

Per richiamare una variabile basta usare la dicitura var(–qualcosa). non occorre compilare o effettuare procedure strane. ikl riconoscimento delle variabili è istantaneo da parte del browser.

Pagina di esempio

Vediamo una pagina html di esempio con il relativo foglio di stile. Manteniamo sintassi volutamente semplice per centrare l’attenzione sulla variabili CSS. Ci limitiamo ad un header, una manciata di articoli rinchiusi da un box ed un footer. Nell’immagine sottostante possiamo raffrontare come dovrebbe apparire e a seguire il listato corrispondente. I testi sono ovviamente esemplificativi.

:root 
{
  --colore-sfondo: lightblue;
  --colore-titolo: #262626;
  --colore-testo: #525252;
  --font: "Arial", sans-serif;
}

body 
{
  margin: 0;
  padding: 0;
  background-color: var(--colore-sfondo);
  font-family: var(--font);
}

.blog-header, footer 
{
  text-align: center;
  padding: 1rem;
  background-color: var(--colore-titolo);
  color: white;
}

.articolo 
{
  container-type: inline-size;
  margin: 1rem;
  padding: 1rem;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.articolo.titolo-articolo 
{
  color: var(--colore-titolo);
  margin: 0 0 1rem 0;
  text-wrap: balance;
  font-size: 1em;
}

.articolo.contenuto-articolo 
{
  color: var(--colore-testo);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sito di prova</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <header class="blog-header">
      <h1>Sito di prova</h1>
    </header>
    <main>
      <article class="articolo">
        <h2 class="titolo-articolo">Imparo i CSS</h2>
        <p class="contenuto-articolo">
          Le variabili vanno dichiarate nel selettore :root{} e tutte hanno un nome del tipo --quellochetipare: qualcosa
        </p>
      </article>
      <article class="articolo">
        <h2 class="titolo-articolo">Web Design</h2>
        <p class="contenuto-articolo">
          Per richiamarle basta usare un attributo come il seguente: background-color: var(--quellochetipare);
        </p>
      </article>
    </main>
    <footer>
      <p>&copy; 2024 Sito di prova</p>
    </footer>
  </body>
</html>

Ultima modifica 3 Marzo 2024