Qual è la differenza tra SCSS e Sass?


1904

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?

Risposte:


1867

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

Le variabili CSS sono supportate e possono essere utilizzate ma non come variabili pre-processore.

Per la differenza tra SCSS e Sass, questo testo nella pagina della documentazione di Sass dovrebbe rispondere alla domanda:

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

La seconda e la vecchia sintassi , nota come sintassi rientrata (o talvolta solo "Sass"), fornisce un modo più conciso di scrivere CSS. Utilizza il rientro anziché le parentesi quadre per indicare la nidificazione dei selettori e le nuove righe anziché i punti e virgola per separare le proprietà. I file che utilizzano questa sintassi hanno l' estensione .sass .

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


229
Quando si sceglie la sintassi, tenere presente che solo scss consente di copiare e incollare i CSS dallo stackoverflow e gli strumenti di sviluppo dei browser, mentre in tal caso è sempre necessario regolare la sintassi
lisca di pesce


Un altro problema: a partire dal 10/05/2019, SASS non supporta ancora le espressioni multilinea, quindi elenchi / mappe di grandi dimensioni devono essere a linea singola, definiti utilizzando molte chiamate di funzione o definiti in file SCSS. Sembra essere ancora una funzionalità pianificata, ma non sono sicuro che ci sia qualche movimento sull'attuazione o meno.
Joseph Sikorski,

12
@ 0x1ad2 La scelta tra scssed sassè più che una preferenza personale in questi giorni. scssè molto più diffuso - utilizzato nelle maggior parte dei quadri CSS popolari come Bootstrap, Foundation, Materializeecc I principali framework di interfaccia utente favoriscono scsssopra sassdi default - angolare, Reagire, Vue. Eventuali tutorial o dimostrazioni utilizzeranno generalmente, scssad esempio, create-react-app facebook.github.io/create-react-app/docs/…
Drenai,

@fishbone non del tutto vero, se si utilizza un editor di codice decente, può gestire copiato stili dal browser e si riscrive al trattino
Miro Krsjak

617

Sono uno degli sviluppatori che hanno contribuito a creare Sass.

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

Usa la sintassi che ti piace di più, entrambi sono pienamente supportati e puoi cambiare tra di loro in seguito se cambi idea.


55
Mi scusi? L'ho letto bene? Sass può effettivamente importare correttamente meno file? C'è qualche sinergia tra mixin / variabili?
pilau

8
La somiglianza con i CSS standard può essere più importante negli ambienti di gruppo in cui ci sono persone che hanno bisogno di leggere il tuo codice, ma solo occasionalmente e non hanno tempo / interesse per apprendere una sintassi completamente nuova.
c roald,

5
"UI" significa "lingua"?
Djechlin,

@djechlin - sì, la mia interpretazione di "UI" qui sarebbe la sintassi del file rivolta al programmatore. Ad esempio punti e virgola o no, ecc.
Orion Elenzil,

10
"UI" nella risposta dovrebbe essere sostituito con un termine più comunemente compreso, come suggerito da @orionelenzil?
Michael Freidgeim,

383

Il .sassfile Sass è visivamente diverso dal .scssfile, ad es

Esempio.sass - sass è la sintassi precedente

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Esempio.scss - sassy css è la nuova sintassi a partire da 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 Sassy CSS (SCSS) semplicemente modificando l'estensione da .cssa .scss.


@Novocaine +1, sono d'accordo. Come programmatore C ++, preferisco le parentesi e i punti e virgola. A proposito, ho una domanda, fa la conversione da .scssper .csslo stesso .cssa .scss?
JW.ZG,

1
Questo è più quello che mi interessa confrontare con le risposte sopra ... Troppo pigro da leggere ;-)
LYu

9
@ JW.ZG, non è una conversione, il nativo .csssembra essere valido .scss. Non appena aggiungi il codice specifico scss, la modifica del nome del file torna a essere un file CSS non valido. cssè un quadrato ed scssè un rettangolo. Tutti i quadrati sono rettangoli, ma non tutti i rettangoli sono quadrati.
Concedi il

145

Sass ( Fogli di stile sintatticamente fantastici ) ha due sintassi:

  • un nuovo: SCSS ( Sassy CSS )
  • e una più vecchia, originale: sintassi del rientro, che è il Sass originale ed è anche chiamato Sass .

Quindi fanno entrambi parte del preprocessore Sass con due diverse possibili sintassi.

La differenza più importante tra SCSS e Sass originale :

SCSS :

  • La sintassi è simile al CSS (al punto che ogni CSS3 valido regolare è anche SCSS valido , ma ovviamente la relazione nell'altra direzione non accade)

  • Usa parentesi graffe {}

  • Usa punti e virgola ;
  • Il segno di assegnazione è :
  • Per creare un mixin utilizza la @mixindirettiva
  • Per usare il mixin lo precede con la @includedirettiva
  • I file hanno l' estensione .scss .

Sass originale :

  • La sintassi è simile a Ruby
  • Senza parentesi graffe
  • Nessun rientro rigoroso
  • Nessun punto e virgola
  • Il segno di assegnazione è =invece di:
  • Per creare un mixin utilizza il =segno
  • Per usare il mixin lo precede con il +segno
  • I file hanno l' estensione .sass .

Alcuni preferiscono Sass , la sintassi originale, mentre altri preferiscono SCSS . Ad ogni modo, ma vale la pena notare che la sintassi rientrata 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

La documentazione di Sass e SCSS


14
Strano che una risposta così chiara e concisa abbia voti così minori di altri. Ho attraversato un mucchio di fonti per capire quali sono le differenze tra Sass e Scss e alla fine ho trovato questo che mi ha illuminato all'istante. Buon lavoro tranne alcuni errori di ortografia / grammatica.
tnkh,

3
@TonyNg grazie. Sono felice di poterti aiutare. Per quanto riguarda i punti, è così sicuro perché ho risposto molto tardi - circa 6 anni dopo aver fatto domande. Sentiti libero di correggermi, dove ho commesso errori di ortografia o grammaticali.
simhumileco,

3
Aggiungi un semplice esempio per mostrare la diversa sintassi e questa risposta sarebbe perfetta.
hogan,

3
Risposta
chiara

3
La grande risposta è questa!
Mohammad Afrashteh,

80

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

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

SASS pro

  • più pulito - se vieni da Python, Ruby (puoi persino scrivere oggetti di scena con sintassi simil-simbolica) o persino dal mondo CoffeeScript, ti verrà molto naturale: scrivere mixin, funzioni e in genere qualsiasi materiale riutilizzabile .sassè molto più facile 'e leggibile rispetto a .scss(soggettivo).

SASS cons

  • sensibile agli spazi bianchi (soggettivo), non mi dispiace in altre lingue, ma qui nei CSS mi disturba (problemi: copia, tab vs guerra spaziale, ecc.).
  • nessuna regola in linea (per me è stata una rottura del gioco), non puoi fare body color: redcome puoi in .scssbody {color: red}
  • importare altre cose da venditori, copiare frammenti CSS vaniglia - non impossibile ma molto noioso dopo qualche tempo. La soluzione è di avere .scssfile (insieme a .sassfile) nel progetto o convertirli in .sass.

Oltre a questo, fanno lo stesso lavoro.

Ora, quello che mi piace fare è scrivere mixin, variabili .sasse codice che verranno effettivamente compilati in CSS .scssse possibile (cioè Visual Studio non ha supporto per, .sassma ogni volta che lavoro su progetti Rails di solito ne combino due, non in un file ofc).

Ultimamente, sto pensando di dare una possibilità a Stylus (per un preprocessore CSS a tempo pieno) perché ti permette di combinare due sintassi in un file (tra le altre funzionalità). Potrebbe non essere una buona direzione per una squadra, ma quando la mantieni da sola, va bene. Lo stilo è in realtà più flessibile quando la sintassi è in questione.

E infine mixin per confronto .scssvs .sasssintassi:

// 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

4
@cimmanon Presenta pro e contro, spiegati chiaramente. Questa è la differenza tra questa e altre risposte. Ho votato per tirare fuori dal rosso. Ho pensato che fosse utile anche se ha il solito diagramma di risposta di Venn che si sovrappone ad ogni altro post SO. Questo potrebbe essere più utile per qualcuno che sta facendo la scelta sui due percorsi. Penso anche che sia un po 'meglio della risposta accettata perché in realtà mostra la differenza della lingua invece di dire semplicemente "Sass è diverso perché non è SCSS", che per me è inutile. Potrei fare a meno delle cose per uso personale, ma comunque :)
coblr

61

Dalla homepage della lingua

Sass ha due sintassi. La nuova sintassi principale (a partire da Sass 3) è nota come "SCSS" (per "Sassy CSS") ed è un superset della sintassi CSS3. Ciò significa che ogni foglio di stile CSS3 valido è valido anche per SCSS. I file SCSS utilizzano l'estensione .scss.

La seconda sintassi precedente è nota come sintassi rientrata (o semplicemente "Sass"). Ispirato dalla perplessità di Haml, è destinato a persone che preferiscono la concisione rispetto alla somiglianza con i CSS. Invece di parentesi e punti e virgola, utilizza il rientro delle righe per specificare i blocchi. Sebbene non sia più la sintassi primaria, la sintassi rientrata continuerà a essere supportata. I file nella sintassi rientrata usano l'estensione .sass.

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


22

La differenza di base è la sintassi. Mentre SASS ha una sintassi libera con spazi bianchi e senza punti e virgola, lo SCSS assomiglia di più ai CSS.


21

SASS è l'acronimo di Syntactically Awesome StyleSheets. È un'estensione del CSS che aggiunge potenza ed eleganza al linguaggio di base. SASS è stato recentemente nominato SCSS con alcuni chages, ma c'è anche il vecchio SASS. Prima di utilizzare SCSS o SASS, vedere la differenza seguente.

inserisci qui la descrizione dell'immagine

Un esempio di alcune sintassi 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 guide puoi consultare il sito ufficiale .


16

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

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

Sass ignora parentesi graffe e punti e virgola e si sdraia sulla nidificazione, che ho trovato più utile.


13

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

Se ciò non avesse 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 usiamo; per separare le dichiarazioni. Ho anche aggiunto tutte le dichiarazioni per .border su una sola riga per illustrare ulteriormente questo punto. Al contrario, il codice SASS riportato di seguito deve trovarsi su righe diverse con rientro e non è necessario utilizzare il;

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Dal CSS sotto puoi vedere che lo stile SCSS è molto più simile al normale CSS del 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 menziona che stanno lavorando con Sass, si riferiscono all'autore in .scss piuttosto che nel tradizionale modo .sass.


12

L'originale sassè simile alla sintassi del rubino, simile al rubino, alla giada ecc ...

In quelle sintassi, non usiamo {}, invece andiamo con spazi bianchi, anche senza l'uso di ;...

Nelle scsssintassi sono più simili CSS, ma con l'ottenimento di più opzioni come: annidamento, dichiarazione, ecc. Simili lesse altre preelaborazioni CSS...

Si tratta fondamentalmente fanno la stessa cosa, ma ho messo paio di righe di ciascuno per vedere la differenza di sintassi, sguardo al {}, ;e spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

6

La risposta compatta:

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

  • I file che terminano con .scssrappresentano la sintassi standard supportata da Sass. SCSS è un superset di CSS.
  • I file che terminano con .sassrappresentano la sintassi "precedente" supportata da Sass originaria del mondo Ruby.

4

SASS è Fogli di stile sintatticamente fantastici ed è un'estensione di CSS che fornisce le caratteristiche di regole nidificate, ereditarietà, Mixin mentre SCSS è Fogli di stile a cascata Sassy che è simile a quello di CSS e colma le lacune e le incompatibilità tra CSS e SASS. È stato concesso in licenza con la licenza MIT. Questo articolo contiene ulteriori informazioni sulle differenze: https://www.educba.com/sass-vs-scss/

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.