sass
SCSS vs Sass

Principali differenze

Anche se la gente spesso dice Sass come il nome di questo preprocessore CSS, spesso indicano la sintassi SCSS . Sass usa l'estensione del file .sass , mentre SCSS - Sass usa l'estensione .scss . Entrambi sono indicati come "Sass".

Parlando in generale, la sintassi SCSS è più comunemente usata. SCSS sembra un normale CSS con più capacità, mentre Sass sembra molto diverso dal normale CSS. Entrambe le sintassi hanno le stesse capacità.

Sintassi

Le differenze principali sono che Sass non usa parentesi graffe o punti e virgola, dove SCSS fa. Sass è anche sensibile agli spazi, il che significa che devi indentare correttamente. In SCSS , puoi formattare e indentare le tue regole come preferisci.

SCSS:

// nesting in SCSS
.parent {
  margin-top: 1rem;

  .child {
    float: left;
    background: blue;
  }
}

SASS:

// nesting in Sass
.parent
  margin-top: 1rem

  .child
    float: left
    background: blue

Dopo la compilazione, entrambi produrranno lo stesso CSS seguente:

.parent {
  margin-top: 1rem;
}
.parent .child {
  float: left;
  background: blue;
}

mixins

Sass tende ad essere la sintassi più "pigra". Niente illustra questo più bello di come tu definisci e includi i mixin.

Definire un mixin

= è come si definisce un mixin in Sass , @mixin in SCSS .

// SCSS
@mixin size($x: 10rem, $y: 20rem) {
  width: $x;
  height: $y;
}
  
// Sass
=size($x: 10rem, $y: 20rem)
  width: $x
  height: $y

Compreso un mixin

+ è come includi in Sass , @include in SCSS .

// SCSS
.element {
  @include size(20rem);
}

// Sass
.element
  +size(20rem)

Mappe

Quando si tratta di mappe, in genere SCSS è la sintassi più semplice. Poiché Sass è basato su rientro, le tue mappe devono essere salvate su un'unica riga.

// in Sass maps are "unreadable"
$white: ( white-50: rgba(255, 255, 255, .1), white-100: rgba(255, 255, 255, .2), white-200: rgba(255, 255, 255, .3), white-300: rgba(255, 255, 255, .4), white-400: rgba(255, 255, 255, .5), white-500: rgba(255, 255, 255, .6), white-600: rgba(255, 255, 255, .7), white-700: rgba(255, 255, 255, .8), white-800: rgba(255, 255, 255, .9), white-900: rgba(255, 255, 255, 1 )

Poiché è possibile formattare il codice su più righe con SCSS , è possibile formattare le mappe in modo che siano più leggibili.

// in SCSS maps are more readable
$white: (
  white-50: rgba(255, 255, 255, .1),
  white-100: rgba(255, 255, 255, .2),
  white-200: rgba(255, 255, 255, .3),
  white-300: rgba(255, 255, 255, .4),
  white-400: rgba(255, 255, 255, .5),
  white-500: rgba(255, 255, 255, .6),
  white-600: rgba(255, 255, 255, .7),
  white-700: rgba(255, 255, 255, .8),
  white-800: rgba(255, 255, 255, .9),
  white-900: rgba(255, 255, 255, 1)
);

Commenti

I commenti in Sass vs. Scss sono in gran parte simili, tranne quando si tratta di linee multiple. SASS multi-linee SASS sono sensibili SCSS , mentre SCSS si basa sui terminatori di commenti.

Commento a riga singola

style.scss

// Just this line will be commented!
h1 { color: red; }

style.sass

// Exactly the same as the SCSS Syntax!
h1
  color: red

Commento a più righe

style.scss

Iniziatore: /*

Terminatore: */

/* This comment takes up
 * two lines.
 */
h1 {
   color: red;
}

Questo h1 elementi h1 con il colore rosso .

style.sass

Ora, SASS ha due iniziatori, ma non i rispettivi terminatori. I commenti multilinea in SASS sono sensibili ai livelli di indentazione .

Iniziatori: // e /*

// This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

Questo h1 elementi h1 con il colore rosso .

Lo stesso può essere fatto con l'iniziatore /* :

/* This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

Così il gioco è fatto! Le principali differenze tra i commenti in SCSS e SASS !

Confronto tra SCSS e SASS

• SCSS sintassi SCSS assomiglia più a una sintassi CSS ma la sintassi SASS è leggermente diversa da SCSS ma entrambi producono esattamente lo stesso codice CSS .
• In SASS non stiamo terminando le proprietà di stile con il punto e virgola ( ; ) ma in SCSS stiamo terminando le proprietà di stile con ( ; ).
• In SCSS abbiamo usato paratessi {} per chiudere le proprietà di stile, ma in SASS non usiamo la paranthesis .
• Indentation è molto importante in SASS . Definirà le proprietà nidificate nella class o id dell'elemento.
• In scss possiamo definire più variabili in una sola riga ma in SASS non possiamo fare.

per la sintassi del loop

Con il rilascio di sass 3.3 e della versione plus, la sintassi di @if e di altre condizioni è stata la stessa. ora possiamo usare espressioni con non solo scss ma anche sass .

sintassi sass

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Compilato a

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

sintassi scss

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

compilato a

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}