SCSS, estensione del linguaggio CSS

SCSS (Sassy CSS) è un’estensione del linguaggio di stile CSS (Cascading Style Sheets) che aggiunge alcune funzionalità e miglioramenti alla sintassi tradizionale di CSS. SCSS è parte del preprocessore di stili Sass (Syntactically Awesome StyleSheets) e ci consente di scrivere codice CSS in modo più efficiente e organizzato.

SCSS funziona in modo simile ai linguaggi di programmazione: è possibile conservare alcuni valori all’interno delle variabili e richiamarle ogni volta che ce n’è bisogno. Si possono anche creare delle funzioni con dei parametri contenenti lo stile desiderato e applicarlo ovunque si voglia.

Vediamo nel dettaglio alcune caratteristiche:

• Sintassi migliorata: SCSS offre una sintassi più concisa rispetto a CSS tradizionale. Puoi utilizzare parentesi graffe {}, punto e virgola ; e selezioni annidate per migliorare la leggibilità del codice.
• Variabili: SCSS ti consente di dichiarare variabili per memorizzare valori come colori, dimensioni del testo, spaziatura e altro. L’utilizzo di variabili semplifica l’aggiornamento e la manutenzione del tuo codice, poiché puoi cambiare il valore di una variabile in un unico punto e influenzerà tutti gli utilizzi di quella variabile nel foglio di stile. Ecco un semplice esempio:

$primary-color: #007bff;

.button {
  background-color: $primary-color;
}

• Mixin: SCSS offre la possibilità di creare mixin, che sono blocchi di codice riutilizzabili. Un mixin può contenere stili comuni o complessi che desideriamo utilizzare in più parti del nostro foglio di stile.

@mixin center-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  @include center-element;
}

• Puoi estendere le regole CSS da una classe o un selettore ad un altro usando l’operatore @extend. Questo ci aiuta a evitare la duplicazione del codice e a mantenere il foglio di stile più pulito.

.button {
  background-color: #007bff;
  border: 1px solid #007bff;
  color: #fff;
}

.button-primary {
  @extend .button;
  font-weight: bold;
}

• Operazioni matematiche: SCSS supporta operazioni matematiche come addizione, sottrazione, moltiplicazione e divisione. Puoi utilizzare queste operazioni per calcolare dimensioni, spaziature e altre proprietà.

$base-font-size: 16px;

.container {
  font-size: $base-font-size * 1.2;
}

Una volta scritto il codice SCSS, bisogna compilare il tutto in un file CSS standard, poiché i browser non comprendono direttamente il codice SCSS. Per fare ciò, possiamo utilizzare strumenti di compilazione come “Sass” o integrare SCSS nella tua pipeline di sviluppo frontend.

Compilazione del codice SCSS

Per compilare il codice SCSS in un file CSS che può essere interpretato dal browser, abbiamo bisogno di un compilatore o di un preprocessore SCSS. Innanzitutto dobbiamo assicurarci di avere Node.js installato nel nostro PC se stiamo lavorando in locale.

Fatto ciò, dopo avere creato il nostro progetto vuoto, o se vogliamo modificarne uno, dobbiamo creare una cartella per i file SCSS, e un’altra di destinazione per i file CSS compilati. Potremmo chiamarle styles e css.

Dobbiamo poi inizializzare il nostro progetto Node.js aprendo il terminale dove si trova la cartella del progetto e digitando:

npm init -y

Sempre da terminale possiamo installare il compilatore SCSS nel nostro progetto. Uno dei compilatori più comuni è sass:

npm install -g sass

Ci sono diversi modi per compilare i file SCSS. Uno è quello di farlo manualmente da terminale indicando il file da compilare e il percorso e il nome del file css. Il compilatore compilerà il file SCSS e genererà un file CSS nel percorso di destinazione specificato.

sass styles/style.scss css/style.css

Possiamo anche dire al compilatore di modificare il file CSS ogni volta che modifichiamo il codice SCSS utilizzando la modalità watch:

sass --watch styles/style.scss css/style.css

Tuttavia, è possibile indicare al compilatore le istruzioni relative i file da compilare e i percorsi dove inserire il codice CSS direttamente dal file sass.config.js. Ecco un esempio di configurazione:

module.exports = {
  // Specifica i percorsi dei file di input e output
  input: 'styles/style.scss',
  output: 'css/style.css',

  // Abilita la modalità di watch per ricompilare automaticamente i file quando vengono modificati
  watch: true,

  // Alcune opzioni aggiuntive
  options: {
    sourcemap: true, // Abilita la generazione dei sourcemaps
    style: 'compressed', // Imposta lo stile di output (nested, expanded, compact, compressed)
  }
};

Con il file di configurazione, possiamo specificare vari aspetti del processo di compilazione, come i percorsi dei file di input e output, le opzioni di stile, l’abilitazione del watch mode e altre impostazioni personalizzate. Possiamo vedere la documentazione e la guida completa nel sito ufficiale.