Ubuntu 16.04 / Come installare Sass

Per installare il legacy Ruby Sass su Ubuntu 16.04, puoi usare il pacchetto ruby-sass da APT o il pacchetto gem sass da RubyGems. Tuttavia, Ruby Sass è un'implementazione dismessa, quindi dovrebbe essere considerata solo quando si riproducono progetti esistenti, e per nuovi ambienti di sviluppo, usa un sistema operativo attualmente supportato e Dart Sass. L'installazione tramite gem non installa nemmeno l'ultima versione di Dart Sass.

Verifica l'implementazione e il supporto del sistema operativo prima di installare

Sass è uno strumento che converte i fogli di stile scritti con variabili e regole annidate in CSS (Cascading Style Sheets). SCSS è una sintassi di Sass simile al CSS che utilizza le parentesi graffe, e l'estensione del file è .scss. Anche con lo stesso nome di comando sass, Ruby Sass e Dart Sass sono implementazioni differenti.

Secondo la guida ufficiale di Sass, Ruby Sass ha raggiunto la fine del suo supporto nel 2019. Anche Ubuntu 16.04 ha terminato sia il supporto standard sia la manutenzione di sicurezza estesa (Expanded Security Maintenance, ESM), e a ottobre 2026, il supporto aggiuntivo per la sicurezza richiede di verificare le condizioni del servizio add-on Legacy di Ubuntu Pro. L'ambito del supporto del sistema operativo può essere trovato in la guida di Canonical per Ubuntu 16.04.

Per prima cosa, esegui il backup del tuo codice sorgente e dei CSS esistenti, e verifica le implementazioni e le versioni utilizzate nei file del progetto Gemfile.lock, package.json, ecc. I due vecchi metodi di installazione riportati di seguito sono alternativi, quindi non è necessario installarli entrambi.

Installa Ruby Sass legacy con APT

Per riprodurre il pacchetto di distribuzione utilizzato su Ubuntu 16.04, verifica nel terminale nel seguente ordine. Ti serve un account che possa eseguire sudo e accesso a un repository APT che funzioni correttamente.

sudo apt update
apt-cache policy ruby-sass
sudo apt install ruby-sass
sass --version

Il campo Candidate in apt-cache policy mostra la versione del pacchetto selezionata per l'installazione. Se non ci sono candidati o se l'aggiornamento fallisce, non presumere che l'installazione sia possibile; verifica prima le impostazioni del repository, la rete e lo stato di supporto dell'ambiente. Non aggiungere arbitrariamente un repository o disabilitare la verifica della firma solo perché un pacchetto non può essere trovato.

Dopo l'installazione, dovrebbe essere visualizzata la versione di Sass. La versione del pacchetto di distribuzione può differire dalla versione del gem, e Sass 3.4.23 (Selective Steve) dei post precedenti è un esempio di output passato. Il risultato dell'installazione attuale non deve necessariamente corrispondere a quella stringa.

Installa la versione legacy richiesta con RubyGems

Questo metodo è da considerare quando un progetto esistente richiede il pacchetto gem Ruby Sass. Di seguito è riportato un esempio che specifica 3.7.4, e se il progetto richiede una versione diversa, dare priorità a tale requisito. Le informazioni su Sass 3.7.4 in RubyGems indicano che è richiesto Ruby 2.0.0 o superiore, ma questa condizione da sola non significa che tutti i gem dipendenti possano essere installate su versioni più vecchie di Ruby.

sudo apt update
sudo apt install ruby
ruby --version
gem --version
gem install --user-install sass -v 3.7.4 --no-document

--user-install è un'opzione per installarla nella directory delle gemme dell'utente invece che a livello di sistema. Se viene visualizzato un avviso che l'eseguibile non può essere trovato, seguire la guida all'installazione utente di RubyGems e aggiungere il bin della directory al PATH. In Bash, puoi applicare il seguente comando al terminale corrente e quindi verificare.

export PATH="$(ruby -r rubygems -e 'print Gem.user_dir')/bin:$PATH"
sass --version

Se questa è un'impostazione che continuerai a usare, aggiungi la linea export sopra a ~/.bashrc una volta e controllala in un nuovo terminale. Per tornare indietro, rimuovi la linea aggiunta e riapri il terminale. Se l'installazione fallisce, controlla i gem dipendenti e la versione di Ruby mostrata nell'errore, e riproduci l'ambiente basandoti sul file di lock memorizzato nel progetto e sull'ambiente al momento. Non disabilitare la verifica HTTPS per risolvere errori di certificato o TLS.

Verifica l'installazione convertendo SCSS in CSS

Stampare solo la versione non conferma la conversione effettiva. In una cartella di lavoro vuota separata, crea un file style.scss e salva tutto il contenuto qui sotto. In una cartella con file esistenti, assicurati prima che non ci siano conflitti con i nomi dei file di esempio esistenti.

$brand: #336699;

.notice {
  color: $brand;
  strong {
    font-weight: 700;
  }
}

Eseguire il seguente comando in quella cartella genererà style.css.

sass style.scss style.css

Il CSS generato dovrebbe contenere i selettori e i valori seguenti. A seconda dell'implementazione e delle impostazioni del formato di output, spazi, interruzioni di linea o commenti della mappa sorgente possono variare.

.notice {
  color: #336699;
}

.notice strong {
  font-weight: 700;
}

Modifica i valori dei colori e riconverti per vedere se i valori nel CSS cambiano, confermando la relazione tra i file di input e output. Tornare ai valori originali ed eseguire nuovamente ripristinerà lo stato dell'esempio. La conversione Sass è il processo di creazione di file CSS, e per applicarla a una pagina web, è necessario caricare il CSS di output nell'HTML corrispondente.

Quando i comandi sono in conflitto o è necessario annullare l'installazione

Se sass: command not found appare dopo l'installazione, verificare se l'installazione è stata completata con successo e controllare il PATH. Se appare una versione diversa da quella prevista, vedere quale eseguibile viene selezionato per primo—che sia installato tramite APT, gem dell'utente o un altro strumento.

command -v sass
type -a sass
sass --version

Mettere il bin del gem dell'utente davanti al PATH può dare priorità a quel comando. In ambienti con installazioni duplicate tramite APT e gem, non guardare solo il numero di versione; registra anche il percorso. Invece di eliminare arbitrariamente i file, rimuovili utilizzando lo strumento di gestione usato per l'installazione.

• Per annullare un'installazione APT, usa sudo apt remove ruby-sass. Prima di eseguire, leggi l'elenco degli elementi da rimuovere e assicurati che non siano in uso da altri progetti.
• Per rimuovere il pacchetto gem dell’utente nell'esempio sopra, usa gem uninstall --user-install sass -v 3.7.4. Non è necessario rimuovere altre versioni o dipendenze condivise in blocco.
• Se l'errore è causato da una sintassi SCSS moderna incompatibile, il semplice reinstallare potrebbe non risolverlo. Compila con l'implementazione richiesta dal progetto, oppure rivedi il codice per passare a Dart Sass.

Passa a Dart Sass in un nuovo ambiente

L'attuale implementazione di riferimento di Sass è Dart Sass. La documentazione ufficiale per l'installazione ti guida nell'installare una distribuzione autonoma o un'installazione npm adatta al tuo sistema operativo e CPU. L'esempio npm in questa sezione deve essere eseguito in un ambiente di sviluppo separato preparato con sistemi operativi supportati e il Node.js richiesto dalla corrispondente versione di Sass, e non presuppone l'esecuzione sul Node.js predefinito di Ubuntu 16.04.

Una volta pronti Node.js e npm, puoi installare le dipendenze di sviluppo specifiche del progetto in una nuova cartella di progetto con il seguente comando. Applicandolo a un progetto esistente, prima effettua il backup di package.json e del file di lock, poi verifica le impostazioni di build esistenti.

npm init -y
npm install --save-dev sass
npx sass --version
npx sass style.scss style.css

Prima di eseguire l'ultimo comando, è necessario salvare lo style.scss della sezione precedente nella stessa cartella. npx sass utilizza il Sass locale al progetto installato con questa procedura e può differire dal comando e dalla versione globale sass. Puoi verificare il risultato dell'installazione con npm ls sass e il CSS generato. Le dipendenze di sviluppo aggiunte in questo esempio possono essere rimosse con npm uninstall --save-dev sass.

Quando si trasferisce un vecchio progetto, confronta i risultati della conversione su un branch di test o una copia, e rivedi le differenze del CSS e gli avvisi prima di applicarli. Puoi controllare il comando e le opzioni per la conversione di singoli file nella documentazione dell’interfaccia a riga di comando di Dart Sass. L'installazione di Ruby Sass e il passaggio all'attuale Dart Sass sono operazioni separate.