Pubblicato il 09/03/2024 da alnao nella categoria Css3 & Bootstrap

SaaS è il più famoso pre-processore per il linguaggio CSS, permette di definire temi e variabili all’interno di un progetto web in modo da rendere il CSS più semplice da sviluppare. Purtroppo il file originale non può essere usato direttamente nei siti ma deve essere tradotto in files CSS per essere usato dalle pagine HTML, a volte la fase di traduzione è impropriamente detta compilazione. Questa tecnica viene usata moltissimo nei siti di grandi dimensioni nei quali sono presenti tanti stili e classi che, inevitabilmente, usano gli stessi valori. L’esempio più classico è la definizione di un colore specifico e l’uso di questo colore non solo nei testi ma anche in bordi e altri componenti grafici del sito.

Per usare questa tecnica è necessario usare un “compilatore”, il più comune pacchetto è disponibile tramite NPM e installabile con il semplice comando

npm install -g sass

E poi sarà possibile usare il traduttore con il comando

sass --watch style.scss style.css

Si rimanda alla documentazione ufficiale per tutti i dettagli riguardo ai comandi disponibili e alla sintassi prevista. Inoltre sono consigliati alcuni plugin per gli IDE, questi eseguono la traduzione in tempo reale sollevando il programmatore del click per la compilazione, il più comune è “Live Sass Compiler” per Visual Studio Code, maggiori dettagli sono disponibili al sito ufficiale.


Un semplice esempio è la definizione di alcune variabili:

/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

E dopo la conversione, il foglio di stile CSS generato è:

body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

Questa tecnica permette anche di generare stili annidati, vietati dal linguaggio CSS ma permessi da Sass, per esempio è possibile annidare i tag:

.content{
  background-color: $bgcolor;
  color: $textcolor;
  a{
    color: $textcolorSecondary;
  }
}

E il risultato della traduzione è:

.content {
  background-color: lightblue;
  color: darkblue;
}
.content a {
  color: yellow;
}

Questa tecnica è studiata per la gestione di siti di grandi dimensioni che necessitano di tanti files ed è stato previsto anche il comando di importazione di file. La sintassi è molto simile a quella usata per css, per esempio il comando di import:

@import 'button';

funziona se il file si chiama

_button.scss

Si rimanda alla documentazione ufficiale per tutti i dettagli e le regole per esempio è possibile usare import per file css, fogli esterni, url ed è possibile usare le media queries per gestire gli import di file, per esempio:

@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

Si rimanda alla documentazione ufficiale anche per i dettagli riguardi ad altre funzionalità previste come la gestione delle funzioni e delle condizioni.


I moduli CSS permettono di dividere i CSS nei siti single page, l’obbiettivo è proprio evitare di aver un unico foglio di stile per un unico progetto single-page compilato ed evitare di avere namespace (o altre tecniche custom) con files divisi in più file ma importati sempre a livello globale. Usando la libreria React, se i componenti sono divisi in file jsx diversi ed se i componente importano un css specifico, questo comunque alla fine risulterà importato a livello globale creando possibili contrasti ed errori se presenti classi con lo stesso nome. La soluzione al problema è usare i moduli che la libreria e il compilatore mette a disposizione. Il primo passo è creare un file css con il nome xxxx.module.css dove il suffisso “module” nel nome file è obbligatorio. Per esempio il file sottocomponente.module.css potrebbe essere:

.sfondoRosso { background-color:red}

Nei file che hanno la necessità di usare questa classe devono importare il file module con il tipo:

import css from './xxxx.module.css';

e poi usare la classe con la sintassi

<div className={css.sfondoRosso}> ... </div>

Da questo semplice esempio si capisce subito che il riferimento alla classe non è puro ma la libreria “compila” il file Css creandone un nome univoco aggiungendo un hash per ogni classe, in questo modo se in un progetto sono presenti più classi con lo stesso nome ma su file diversi questi vengono “compilati” con nomi diversi grazie ad un hash univoco. La documentazione ufficiale di React mostra un classico esempio simile.

Attivare la libreria Sass in un progetto React è molto più semplice di quanto si possa sembrare: è come se avessero pensato tutta la libreria in modo che possa funzionare perfettamente in simbiosi. Prima di tutto bisogna installare la libreria nel progetto

npm i sass

Dopo di che basta creare un file con estensione “scss”, in questo file si può giocare a piacimento, per esempio definire una variabile base e poi usarla nel file

$primaryColor: white;
...
.sidebar-brand-icon {
color: $primaryColor;
}

Nel file principale del progetto index.js (nel file javascript e non nella pagina html) è necessario importare il modulo scss con la semplice riga:

import './index.scss';

Ovviamente questo è un esempio che semplifica molto l’uso di SASS nelle librerie javascript, si rimanda alla documentazione ufficiale per tutti i dettagli.

MENU