Cos’è il linguaggio SASS? Scopri come Imparare ad Utilizzarlo Subito!

Se sei nuovo nel mondo del web design, probabilmente hai sentito già parlare di linguaggio Sass, ma forse non abbastanza da sapere cosa fa, se dovresti usarlo o meno e come farlo. In questo articolo ti toglieremo tutti questi dubbi!

Il LINGUAGGIO SASS

In questo articolo andiamo alla scoperta del linguaggio SASS, delle differenze con il CSS e tutti i segreti per imparare a usare questo fantastico strumento, fondamentale nello sviluppo di siti web.

COS’È IL LINGUAGGIO SASS? UNO STRUMENTO INDISPENSABILE

Scrivere CSS (Cascading Style Sheets) è fondamentale per descrivere efficacemente come gli elementi HTML devono essere visualizzati su una pagina web, in modo da definire stili, design, layout e tutto ciò che è necessario per creare un gran sito web.

Ma quando inizi a lavorare con siti grandi e complessi, potresti iniziare a chiederti se il CSS potrebbe essere migliore. Se stai avendo questi pensieri, congratulazioni! Il tuo momento Sass è arrivato!

Sass sta per Syntactically Awesome Style Sheet ed è un preprocessore del CSS, aggiungendo delle funzionalità “speciali” a quest’ultimo lo rende strutturalmente più facile e con una sintassi più ricca. Per cominciare ti consigliamo di visitare subito la webpage officiale Sass.

L’obiettivo del linguaggio SASS è rendere il processo di codifica più semplice ed efficiente. Ma esploriamolo in modo più dettagliato andando per ordine.

Sass serve a ridurre la ripetizione di CSS e, dunque, a far risparmiare molto tempo agli sviluppatori front-end. Fu disegnato per la prima volta da Hampton Catlin e sviluppato poi da Natalie Weizenbaum nel 2006. È interamente compatibile con tutte le versioni del CSS, oltre che completamente gratis da scaricare e da utilizzare.

Ma cos’è il CSS? La sigla sta per Cascading Style Sheets ed è, insieme al linguaggio HTML, la base per creare un sito web. È il linguaggio che viene utilizzato per rappresentare la parte grafica del sito web. È il CSS che permette di realizzare gli effetti visivi di un sito, per questo la dicitura “style”.

Per questo motivo, prima di addentrarti nel linguaggio Sass è bene che tu sappia che, secondo molti web designer, è bene conoscere CSS prima di approfondire Sass (o qualsiasi altro preprocessore).

È importante dunque conoscere veramente le basi del CSS. Assicurati di apprendere i concetti chiave prima di iniziare ad esplorare scorciatoie!

CHE COS’È ESATTAMENTE IL LINGUAGGIO SASS

Quando si crea una pagina web, scrivere dei CSS che siano coerenti e leggibili può essere un processo complicato. Soprattutto se gli style sheets (o fogli di stile) diventano più complessi, grandi e difficile da mantenere.

In questi casi esistono per fortuna degli strumenti che possono aiutare gli sviluppatori, per poter scrivere migliori CSS: i preprocessori (o precompilatori).

Che si intende quando parliamo di preprocessore? Con questo termine indichiamo un programma di linguaggio di scripting che estende il CSS consentendo agli sviluppatori di scrivere codice in un linguaggio, per poi compilarlo in CSS.

Un preprocessore funziona come un programma che prende un tipo di dati e lo converte in un altro tipo di dati. Nel nostro caso i preprocessori CSS sono linguaggi di pre-elaborazione che vengono compilati poi in CSS. Sass è forse il preprocessore più popolare in circolazione in questo momento.

QUAL È LA DIFFERENZA TRA CSS E SASS?

Abbiamo visto che Sass è un’estensione di CSS. È generalmente considerata più stabile e più potente di quest’ultimo. Sass serve di fatto a semplificare l’uso di CSS e ad arricchirlo con funzionalità maggiori. Grazie a Sass puoi descrivere lo stile di un documento in modo molto più chiaro e strutturato.

Per via delle sue avanzate caratteristiche rispetto a CSS, Sass viene solitamente preferito rispetto ad esso. Ad esempio, tra le sue funzionalità che lo rendono di gran lunga più facilmente utilizzabile, c’è quella di poter inserire delle variabili.

Questo permette, come fanno altri linguaggi di programmazione, di memorizzare informazioni che si possono ripetere in tutto lo style sheet. L’assegnazione di una variabile può essere eseguita semplicemente utilizzando i due punti, facendola iniziare con il segno $.

Un’altra differenza con CSS è che Sass supporta anche l’annidamento logico, che CSS non ha. SASS consente all’utente di avere un codice nidificato che può essere inserito l’uno nell’altro. Cosa implica questo? È un metodo fantastico per ridurre la quantità di codice da scrivere. Ma occhio ad usarlo con cura, perché si può cadere facilmente nella scrittura di un CSS troppo dispersivo.

.nav-menu {
  background: #fff;
  height: 100%;
}
.nav-menu ul li a {
  font-family: "Quicksand", sans-serif;
  color: #666666;
  text-decoration: none;
  line-height: 80px;
}
.nav-menu ul {
  list-style: none;
}
.nav-menu ul li {
  float: left;
  font-size: 14px;
  padding-left: 40px;
  font-weight: bold;
}

.nav-menu{
  background: #fff;
  height: 100%;

  & ul li a {
    font-family: 'Quicksand', sans-serif;
    color: #666;
    text-decoration: none;
    line-height: 80px;
  }

  & ul{
    list-style: none;

    & li{
      float: left;
      font-size: 14px;
      padding-left: 40px;
      font-weight: bold;
      }
    }
  }

PERCHÉ SCEGLIERE IL LINGUAGGIO SASS?

Come abbiamo detto, i fogli di stile stanno diventando sempre più grandi, più complessi e più difficili da mantenere. È qui che può aiutare un preprocessore CSS. In particolare, Sass ti consente di utilizzare funzionalità che non esistono nei CSS, come variabili, regole nidificate, mixin, importazioni, ereditarietà, funzioni integrate e tante altre.

Sass dispone di alcune funzionalità uniche che lo rendono uno strumento fondamentale nello sviluppo di pagine web.

Le variabili, come abbiamo già anticipato, permettono di memorizzare informazioni che possono essere riutilizzate in un secondo momento, come i colori o altri valori comunemente utilizzati.

Il comando @extend ti aiuta invece a creare “classi” che consentono l’ereditarietà delle regole. Ciò vuol dire che non dovrai più includere vari nomi di classi nei tuoi elementi HTML, mantenendo così un codice DRY (“Don’t Repeat Yourself”).

Sass ha anche alcune altre incredibili funzionalità rispetto ad altri preprocessori, come l’uso di istruzioni logiche (condizionali e loop), funzioni personalizzate, integrazione con altre librerie e molte altre. Queste funzionalità da sole possono aiutare te e il tuo team a essere più produttivi e a scrivere CSS migliori alla fine del processo di sviluppo.

COME FUNZIONA IL LINGUAGGIO SASS E COME USARLO

Tieni ben presente che non puoi inviare codice Sass direttamente al tuo browser, perché non saprà cosa farsene. Prima di farlo, dovrai usare il preprocessore Sass per tradurre codice Sass in CSS standard.

Questa operazione è conosciuta con il nome di transpilazione. In concreto, assomiglia molto al processo di compilazione ma consiste, invece che nella traduzione di un source code (codice sorgente) leggibile dall’uomo in un object code leggibile da una macchina, in tradurre da un linguaggio leggibile dall’uomo a un altro, come in questo caso dal Sass al CSS.

La traspirazione da SASS a CSS è facile. Tutte le variabili definite in SASS sono sostituite da valori in CSS. Ciò semplifica la creazione e la gestione di diversi file CSS per l’applicazione. Un consiglio che possiamo darti è non preoccuparti troppo di cosa succede durante questo processo. L’importante è sapere che stai “traducendo” codice Sass in codice CSS.

Ricorda che Sass utilizza come linguaggio Ruby, perciò, prima di questo processo di transpilazione dovrai installarlo.

COME INSTALLARE SASS

Una volta che avrai installato Ruby, dovrai installare il transpiler di Sass.

Per farlo apri una finestra di comando. Su Windows, utilizza il collegamento “Avvia prompt dei comandi con Ruby”. Su un Mac, utilizza il programma Terminale (lo troverai nella cartella Utilità).

Una volta aperta la finestra dei comandi, esegui il comando seguente:

gem install sass

Su entrambi i sistemi, a seconda delle impostazioni di sicurezza, potresti ricevere un messaggio di errore. In tal caso, prova invece questo comando:

sudo gem install sass

LA SINTASSI DEL LINGUAGGIO SASS

Sass include due opzioni di sintassi:

• SCSS: che utilizza come estensione file .scss ed è interamente compatibile con CSS. È la sintassi più utilizzata proprio per questa compatibilità, che ti permette di trasformare il tuo file CSS in SASS solo rinominandolo da .css in .scss.
• Intended (o semplicemente Sass): utilizza l’estensione del file .sass e l‘indentazione al posto delle parentesi. Tieni ben presente che però non è completamente conforme alla sintassi CSS, ma è più veloce da scrivere.

Nota bene, inoltre, che i file possono essere convertiti da una sintassi all’altra utilizzando il comando sass-convert.

Ma vediamo un esempio pratico di come in che modo Sass aiuta enormemente la costruzione di pagine web, specialmente quando diventano più complesse.

Come abbiamo già anticipato, uno dei grandi vantaggi dell’utilizzo di un preprocessore CSS come Sass è la capacità di utilizzare le variabili. Una variabile ti consente di memorizzare un valore o un insieme di valori e di riutilizzare queste variabili nei tuoi file SASS quante volte vuoi e dove vuoi. Una funzione facile, potente e utile.

Immagina uno scenario in cui stai costruendo un sito con un fantastico colore blu ovunque; pulsanti, menu, icone, contenitori, ecc. Stai anche usando un paio di fantastici caratteri: Ubuntu e Nunito. Usando il CSS tradizionale, dovresti ripetere lo stesso codice ripetutamente, ma con il linguaggoSASS puoi memorizzare questi valori come variabili.

Dopo aver creato le variabili, è possibile utilizzarle ovunque sia necessario.

Quando compili i tuoi file SCSS, SASS si prenderà cura delle variabili che hai usato, sostituendo il nome della variabile con il suo valore memorizzato. Potente, vero? E, naturalmente, cambiare il valore del colore è veloce come aggiornare il contenuto variabile e ricompilare. I giorni in cui hai usato “Trova e sostituisci” nell’editor di testo per aggiornare i colori nel tuo file CSS sono finiti!

UN CORSO SUL LINGUAGGIO SASS

Se vuoi saperne di più e desideri imparare davvero a utilizzare Sass, su DigitalDojo.it troverai il corso adatto a te, “SASS – un nuovo modo di scrivere il CSS”. Preparato con cura dal nostro sensei Francesco Passanante, full stack web developer con esperienza decennale, il corso ti formerà all’utilizzo dei preprocessori CSS.

Imparerai come rendere il tuo CSS più flessibile e mantenibile, migliorando enormemente la qualità del tuo sito web. Apprenderai come utilizzare tutte le funzionalità che rendono unico Sass, come variabili, operazioni, mixin, nesting, e tanto altro ancora.

CONCLUSIONI SUL LINGUAGGIO SASS E PERCHÉ SCEGLIERLO

I preprocessori CSS, e Sass prima di ogni altro, sono strumenti che si utilizzeranno a lungo, ancora per moltissimo tempo. Sass consente di estendere le funzionalità CSS di base fornendo una serie di potenti funzionalità che aumenteranno immediatamente la produttività.

Tra i suoi vantaggi, che abbiamo in gran parte già trattato, ricordiamo:

• Sass consente all’utente di scrivere un codice pulito. Semplifica la gestione e permette di utilizzare meno CSS, velocizzando il processo.
• Contiene meno codice, il che rende più facile avere il suo corrispettivo CSS
• È più stabile, potente ed elegante. È utilizzato da designer e sviluppatori di tutto il mondo e li aiuta a lavorare in modo più efficiente e rapido.
• Essendo pienamente compatibile con CSS, è possibile utilizzarlo in tutte le librerie CSS.

Con DigitalDojo.it potrai finalmente imparare a usare il linguaggio Sass in modo professionale per far crescere il tuo sito web o le tue skills nel web development.

Anteprima