Qual è la differenza tra SCSS e Sass?

Da quello che ho letto, Sass è un linguaggio che rende i CSS più potenti con supporto variabile e matematico.

Qual è la differenza con SCSS? Dovrebbe essere la stessa lingua? Simile? Diverso?

Sass è un pre-processore CSS con avanzamenti di syntax. I fogli di stile nella syntax avanzata vengono elaborati dal programma e trasformati in normali fogli di stile CSS. Tuttavia, non estendono lo stesso standard CSS.

La ragione principale di ciò è l’aggiunta di funzionalità che CSS manca dolorosamente (come le variabili).

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

Sono disponibili due syntax per Sass. Il primo, noto come SCSS (Sassy CSS) e utilizzato in tutto questo riferimento, è un’estensione della syntax dei CSS. Ciò significa che ogni foglio di stile CSS valido è un file SCSS valido con lo stesso significato. Questa syntax è migliorata con le funzionalità di Sass descritte di seguito. I file che usano questa syntax hanno l’estensione .scss .

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

Tuttavia, tutto questo funziona solo con il pre-compilatore Sass che alla fine crea CSS. Non è un’estensione allo standard CSS stesso.

Sono uno degli sviluppatori che ha contribuito a creare Sass.

La differenza è l’interfaccia utente. Sotto l’aspetto testuale sono identici. Ecco perché i file sass e scss possono importarsi a vicenda. In realtà, Sass ha quattro parser di syntax: scss, sass, CSS e less. Tutti questi convertono una syntax diversa in un Abstract Syntax Tree che viene ulteriormente elaborato nell’output CSS o anche in uno degli altri formati tramite lo strumento sass-convert.

Usa la syntax che ti piace di più, entrambi sono completamente supportati e puoi cambiarli in seguito se cambi idea.

Il file Sass .sass è visivamente diverso dal file .scss , ad es

Example.sass – sass è la syntax più vecchia

 $color: red =my-border($color) border: 1px solid $color body background: $color +my-border(green) 

Example.scss – sassy css è la nuova syntax di Sass 3

 $color: red; @mixin my-border($color) { border: 1px solid $color; } body { background: $color; @include my-border(green); } 

Qualsiasi documento CSS valido può essere convertito in CSS Sassy (SCSS) semplicemente cambiando l’estensione da .css a .scss .

La sua syntax è diversa, e questo è il pro principale (o contro, a seconda della tua prospettiva).

Cercherò di non ripetere molto quello che hanno detto gli altri, puoi facilmente google ma, invece, vorrei dire un paio di cose dalla mia esperienza usando entrambi, a volte anche nello stesso progetto.

SASS pro

  • più pulito – se provieni da Python, Ruby (puoi persino scrivere oggetti di scena con syntax simil-simbolica) o persino il mondo CoffeeScript, sarà molto naturale per te – scrivere mixin, funzioni e in generale qualsiasi materiale riutilizzabile in .sass è molto ‘più semplice’ e leggibile rispetto a .scss (soggettivo).

SASS contro

  • whitespace sensitive (soggettivo), non mi dispiace in altre lingue ma qui in CSS mi disturba solo (problemi: copia, tab vs space war, etc).
  • nessuna regola incorporata (questo è stato un rompicapo per me), non puoi fare body color: red come puoi nel body {color: red} .scss body {color: red}
  • importazione di materiale di altri fornitori, copia di snippet di vaniglia CSS – non imansible ma molto noioso dopo un po ‘di tempo. La soluzione è di avere i file .scss (insieme ai file .sass ) nel tuo progetto o convertirli in .sass .

Oltre a questo, fanno lo stesso lavoro.

Ora, quello che mi piace fare è scrivere mixin e variabili in .sass e nel codice che verranno compilati in CSS in .scss se ansible (ad esempio Visual Studio non ha il supporto per .sass ma ogni volta che lavoro su progetti Rails di solito combina due di loro, non in un file di c).

Ultimamente, sto pensando di dare a Stylus una possibilità (per un preprocessore CSS a tempo pieno) perché consente di combinare due syntax in un file (tra alcune altre caratteristiche). Potrebbe non essere una buona direzione per una squadra, ma quando la stai mantenendo da sola, va bene. Lo stilo è effettivamente più flessibile quando la syntax è in questione.

E infine mixin per .sass syntax .scss vs .sass :

 // SCSS @mixin cover { $color: red; @for $i from 1 through 5 { &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) } } } .wrapper { @include cover } // SASS =cover $color: red @for $i from 1 through 5 &.bg-cover#{$i} background-color: adjust-hue($color, 15deg * $i) .wrapper +cover 

Dalla homepage della lingua

Sass ha due syntax. La nuova syntax principale (come da Sass 3) è conosciuta come “SCSS” (per “Sassy CSS”) ed è un superset della syntax di CSS3. Ciò significa che ogni foglio di stile CSS3 valido è anche SCSS valido. I file SCSS utilizzano l’estensione .scss.

La seconda syntax più vecchia è nota come syntax indentata (o semplicemente “Sass”). Ispirato alla tenacia di Haml, è pensato per le persone che preferiscono la concisione rispetto alla somiglianza con i CSS. Invece di parentesi e punti e virgola, utilizza il rientro delle linee per specificare i blocchi. Sebbene non sia più la syntax principale, la syntax indentata continuerà a essere supportata. I file nella syntax rientrata utilizzano l’estensione .sass.

SASS è un linguaggio interpretato che sputa CSS. La struttura di Sass assomiglia ai CSS (da remoto), ma mi sembra che la descrizione sia un po ‘fuorviante; non è un sostituto per CSS o un’estensione. È un interprete che sparge i CSS alla fine, quindi Sass ha ancora i limiti del normale CSS, ma li maschera con un semplice codice.

Sass ( sintatticamente Awesome StyleSheets ) ha due syntax:

  • uno più recente: SCSS ( Sassy CSS )
  • e una più vecchia, originale: syntax indent, che è il Sass originale ed è anche chiamata Sass .

Quindi sono entrambi parte del preprocessore di Sass con due diverse syntax possibili.

Le differenze più importanti tra SCSS e Sass originale:

SCSS :

  • La syntax è simile al CSS .
  • Usa le parentesi graffe {} .
  • Usa il punto e virgola ; .
  • Il segno variabile in SCSS è $ .
  • Il segno dell’assegnazione di SCSS è :
  • I file che usano questa syntax hanno l’estensione .scss .

Sass originale :

  • La syntax è simile a Ruby .
  • Qui nessun uso di parentesi graffe.
  • Nessuna indentazione rigorosa
  • Nessun punto e virgola
  • Il segno variabile in Sass è ! invece di $ .
  • Il segno di assegnazione in Sass è = invece di :
  • I file che usano questa syntax hanno l’estensione .sass .

Queste sono due syntax disponibili per Sass .

Alcuni preferiscono Sass , la syntax originale – mentre altri preferiscono SCSS . Ad ogni modo, ma vale la pena notare che la syntax indentata di Sass non è stata e non sarà mai deprecata .

Conversioni con sass-convert :

 # Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass 

SASS REFERENCE

La differenza fondamentale è la syntax. Mentre SASS ha una syntax allentata con lo spazio bianco e nessun punto e virgola, SCSS assomiglia di più ai CSS.

Il sass originale è ruby sintattico, simile al ruby, alla giada ecc …

In quelle syntax, non usiamo {} , ma usiamo spazi bianchi, anche senza uso di ;

Nella syntax scss sono più come i CSS , ma con ottenere più opzioni come: nidificazione, dichiarazione, ecc, simile a less e altri CSS pre-elaborazione …

Fondamentalmente fanno la stessa cosa, ma ho messo un paio di righe per vedere la differenza di syntax, guarda {} ; e spaces :

SASS:

 $width: 100px $color: green div width: $width background-color: $color 

SCSS:

 $width: 100px; $color: green; div { width: $width; background-color: $color; } 

Sass è stato il primo e la syntax è leggermente diversa. Ad esempio, incluso un mixin:

 Sass: +mixinname() Scss: @include mixinname() 

Sass ignora le parentesi graffe e i semi punti e si appoggia al nidificazione, cosa che ho trovato più utile.

La differenza tra articolo SASS e SCSS spiega la differenza nei dettagli. Non essere confuso dalle opzioni SASS e SCSS, anche se inizialmente ero anch’io, .scss è Sassy CSS ed è la prossima generazione di .sass.

Se questo non ha senso, puoi vedere la differenza nel codice qui sotto.

 /* SCSS */ $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } 

Nel codice sopra che usiamo; per separare le dichiarazioni. Ho persino aggiunto tutte le dichiarazioni per .border su una singola riga per illustrare ulteriormente questo punto. Al contrario, il codice SASS in basso deve essere su linee diverse con indentazione e non c’è alcun uso del;

 /* SASS */ $blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue 

Puoi vedere dal CSS sotto che lo stile SCSS è molto più simile al normale CSS rispetto al vecchio approccio SASS.

 /* CSS */ .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } 

Penso che la maggior parte delle volte in questi giorni, se qualcuno afferma che stanno lavorando con Sass, si riferiscono alla creazione di .scss piuttosto che al modo tradizionale .sass.

SASS sta per Syntactically Awesome StyleSheets. È un’estensione del CSS che aggiunge potenza ed eleganza al linguaggio di base. SASS è stato recentemente chiamato SCSS con alcune chages, ma anche il vecchio SASS è presente. Prima di utilizzare SCSS o SASS, vedere la differenza di seguito.

inserisci la descrizione dell'immagine qui

Esempio di alcune syntax SCSS e SASS

SCSS

 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } //Mixins @mixin transform($property) { -webkit-transform: $property; -ms-transform: $property; transform: $property; } .box { @include transform(rotate(30deg)); } 

SASS

 $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color //Mixins =transform($property) -webkit-transform: $property -ms-transform: $property transform: $property .box +transform(rotate(30deg)) 

Output CSS dopo la compilazione (uguale per entrambi)

 body { font: 100% Helvetica, sans-serif; color: #333; } //Mixins .box { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } 

Per ulteriori consultare il sito ufficiale

Risposta compatta:

SCSS si riferisce alla syntax principale supportata dal pre-processore Sass CSS .

  • I file che terminano con .scss rappresentano la syntax standard supportata da Sass. SCSS è un superset di CSS.
  • I file che terminano con .sass rappresentano la syntax “più vecchia” supportata da Sass che ha origine nel mondo dei rubini.