Articles

Differenza tra .sass e .scss

by admin

Quando ho iniziato il percorso dei preprocessori CSS sono stato sopraffatto dalle diverse opzioni (sass, less, stylus), dalle differenze nella sintassi e soprattutto non avevo idea di come avrei dovuto iniziare con questo nuovo approccio alla scrittura di CSS.

Se sei un utente frequente di CodePen.io noterai che ci sono alcune opzioni quando si tratta del sapore dei CSS che puoi scegliere.

  • SASS con bussola
  • SCSS con bussola
  • MENO
  • Regolare ol’ CSS

Non essere confuso dalle opzioni SASS e SCSS, anche se inizialmente ero, .scss è CSS impertinente ed è la prossima generazione di .sass. Una spiegazione dal sito web

Sass ha due sintassi. La sintassi più comunemente usata è conosciuta come “SCSS” (per “CSS impertinente”), ed è un superset della sintassi CSS3. Ciò significa che ogni foglio di stile CSS3 valido è anche SCSS valido. I file SCSS utilizzano l’estensione .scs.

La seconda sintassi più vecchia è nota come sintassi rientrata (o semplicemente “.sass”). Ispirato alla concisione di Haml, è destinato a persone che preferiscono la concisione alla somiglianza con i CSS. Invece di parentesi e punti e virgola, utilizza il rientro delle linee per specificare i blocchi. I file nella sintassi rientrata utilizzano l’estensione .sass.

Spiegazione di SASS vs SCSS sul sass-lang.com sito web

Se ciò 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 qui sopra usiamo; per separare le dichiarazioni. Ho anche aggiunto tutte le dichiarazioni per .border su una singola riga per illustrare ulteriormente questo punto.

Al contrario, il codice SASS qui sotto deve essere su linee diverse con indentazione e non c’è uso di ;.

/* 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 qui sotto che lo stile SCSS è molto più simile al CSS normale 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 menziona che stanno lavorando con Sass si riferiscono alla creazione .scss piuttosto che il tradizionale .sass modo.

Potresti anche voler controllare alcuni @mixins utili che ti aiuteranno con la tua build reattiva.