Dall'archivio script > HTML5

Usare le variabili per personalizzare gli stili CSS

di Morgan PizziniMorgan Pizzini,

Nel CSS abbiamo un modo per impostare delle variabili che potranno essere riutilizzate all'interno della definizione degli stili.

:root {
  --main-bg-color: black;
}

mio-elemento {
  background-color: var(--main-bg-color);
}

Ma non è solo questo il caso: possiamo creare variabili direttamente nell'HTML e riutilizzarle nel CSS, questo ci da uno spiraglio di customizzazione dall'esterno del file CSS.

<div class="container" style="--count: 10">
  <span style="--index: 0"></span>
  <span style="--index: 1"></span>
  <span style="--index: 2"></span>
  <span style="--index: 3"></span>
  <span style="--index: 4"></span>
  <span style="--index: 5"></span>
  <span style="--index: 6"></span>
  <span style="--index: 7"></span>
  <span style="--index: 8"></span>
  <span style="--index: 9"></span>
</div>

.container span {
  height: 10px;
  width: 30px;
  background: grey;
  display: block;
  opacity: calc(var(--index) / var(--count));
}

Utilizzando le due variabili count e index riusciamo ad impostare una diversa opacità dell'elemento span.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi