Dall'archivio script > HTML5

Creare classi CSS custom per Bootstrap 5

di Morgan PizziniMorgan Pizzini, in HTML5, Boostrap,

Dalla versione 4 di Bootstrap, SCSS è il pre-processore CSS di default. Con la versione 5 sono state aggiunte delle API che si basano sull'elemento maps di questo linguaggio (documentazione disponibile all'indirizzo https://sass-lang.com/documentation/values/maps).

All'interno del nostro file SCSS dobbiamo importare una serie di file che permettano alle API di funzionare correttamente.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

L'esempio più semplice è la creazione di una serie di classi che vanno ad insistere sul valore di una proprietà.

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

A seguito della compilazione in CSS, avremo il seguente codice.

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

A questo possiamo aggiungere numerose varianti: dal prefisso allo stato, fino alle media-query.

$utilities: (
  "opacity": (
    property: opacity,
    class: o, // specifica il prefisso della classe
    state: hover, // aggiunge lo stato :hover ad ogni classe
    responsive: true, // inserisce varianti in media query
    print: true, // aggiunge media-print
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Per ulteriori implementazioni ed esempi è disponibile un'ottima guida anche all'interno della documentazione ufficiale https://getbootstrap.com/docs/5.0/utilities/api/.

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