Qual è la differenza tra SCSS e Sass?

Sass è un preprocessore CSS con avanzamenti di sintassi. I fogli di stile nella sintassi avanzata sono elaborati dal programma e trasformati in normali fogli di stile CSS. Tuttavia, essi non estendono lo standard CSS stesso.

Le variabili CSS sono supportate e possono essere utilizzate, ma non così bene come le variabili del preprocessore.

La differenza tra SCSS e Sass, questo testo sulla pagina di documentazione di Sass dovrebbe rispondere alla domanda:

Ci sono due sintassi disponibili per Sass. La prima, conosciuta come SCSS (Sassy CSS) e usata in tutto questo riferimento, è un'estensione della sintassi dei CSS. Questo significa che ogni foglio di stile CSS valido è un file SCSS valido con lo stesso significato. Questa sintassi è migliorata con le caratteristiche di Sass descritte di seguito. I file che usano questa sintassi hanno l'estensione .scss.

La seconda e più vecchia sintassi, conosciuta come sintassi indentata (o talvolta solo "Sass"), fornisce un modo più conciso di scrivere CSS. Usa l'indentazione piuttosto che le parentesi per indicare l'annidamento dei selettori, e linee nuove piuttosto che punti e virgola per separare le proprietà. I file che usano questa sintassi hanno l'estensione .sass.

Tuttavia, tutto questo funziona solo con il precompilatore Sass che alla fine crea il CSS. Non è un'estensione dello standard CSS stesso.

Sono uno degli sviluppatori che ha contribuito a creare Sass.

La differenza è l'UI. Sotto l'esterno testuale sono identici. Questo è il motivo per cui i file sass e scss possono importarsi a vicenda. In realtà, Sass ha quattro analizzatori di sintassi: scss, sass, CSS e less. Tutti questi convertono una sintassi diversa in un Abstract Syntax Tree che viene ulteriormente elaborato in output CSS o anche in uno degli altri formati tramite lo strumento sass-convert.

Usa la sintassi che ti piace di più, entrambe sono pienamente supportate e puoi cambiarle in seguito se cambi idea.

Dalla homepage della lingua

Sass ha due sintassi. La nuova sintassi principale (a partire da Sass 3) è conosciuta come "SCSS" (per "Sassy CSS"), ed è un superinsieme della sintassi di CSS3. Questo significa che ogni foglio di stile CSS3 valido è valido anche per gli SCSS. I file SCSS usano l'estensione estensione .scss.

La seconda sintassi, più vecchia, è conosciuta come la sintassi indentata (o semplicemente "Sass"). Ispirata dalla brevità di Haml, è inteso per le persone che preferiscono la concisione piuttosto che la somiglianza con i CSS. Invece di parentesi e punti e virgola, esso usa l'indentazione delle linee per specificare i blocchi. Sebbene non sia più la sintassi primaria, la sintassi indentata continuerà ad essere supportata. I file nella sintassi indentata usano l'estensione estensione .sass.

SASS è un linguaggio interpretato che sputa fuori CSS. La struttura di Sass assomiglia ai CSS (alla lontana), ma mi sembra che la descrizione sia un po' fuorviante; non è *un sostituto dei CSS, o un'estensione. È un interprete che alla fine sputa fuori i CSS, quindi Sass ha ancora i limiti dei normali CSS, ma li maschera con del semplice codice.