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

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.

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.

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

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

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.

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.

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.

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 .

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.

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.

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;
}

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.

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/