Sass gegen SCSS

Sass bietet zwei unterschiedliche Syntaxen:

• Sass
• SCSS

Beide sind ähnlich und tun dasselbe, aber in unterschiedlichem Stil geschrieben. SCSS ist das neueste und gilt als besser als Sass.

Unterschied zwischen SASS und SCSS

Sass: Sass ist von einem anderen Präprozessor namens Haml abgeleitet. Es wurde von Ruby-Entwicklern entworfen und geschrieben, daher verwenden Sass-Stylesheets Ruby-ähnliche Syntax ohne Klammern, ohne Semikolons und mit einer strikten Einrückung. In Sass ist das Variablenzeichen ! statt $ und Zuweisungszeichen ist = statt :.

Siehe dieses Beispiel:

1.    
2. // Variable  
3. ! Primärfarbe =  Hotpink  
4.   
5. //  Mischen  
6. = Rand -Radius(!Radius)  
7.     -webkit-border-radius = !radius  
8.     -moz-border-radius = !radius  
9.     Grenzradius = !Radius  
10.   
11. .mein-element  
12.     color = !Primärfarbe  
13.     Breite =  100 %  
14.     Überlauf =  ausgeblendet  
15.   
16. .mein-anderes-element  
17.     +Randradius(5px)  

SCSS: SCSS bietet die CSS-freundliche Syntax, um die Lücke zwischen Sass und CSS zu schließen. SCSS heißt Sassy CSS.

Siehe dieses Beispiel:

1. // Variable  
2. $Grundfarbe: Hotpink;  
3.   
4. // Mischen  
5. @mixin border-radius($radius) {  
6.     -webkit-border-radius: $radius;  
7.     -moz-Grenzradius: $radius;  
8.     Grenzradius: $radius;  
9. }  
10.   
11. .mein-element {  
12.     Farbe: $Primärfarbe;  
13.     Breite: 100 %;  
14.     Überlauf versteckt;  
15. }  
16.   
17. .mein-anderes-element {  
18.     @include Randradius (5px);  
19. }  

Hier können Sie sehen, dass SCSS CSS definitiv näher steht als Sass.

Vorteil der Sass-Syntax:

Die Syntax von Sass unterscheidet sich grundlegend von CSS, ist aber kürzer und einfacher zu tippen. Sie müssen kein Semikolon oder geschweifte Klammern eingeben, nicht einmal @mixin oder @include, wenn ein einzelnes Zeichen ausreicht: = und +.

Es bietet auch saubere Codierungsstandards, da es einer eingerückten Syntax folgt.

Vorteil der SCSS-Syntax:

Es ist vollständig CSS-kompatibel. Sie können eine CSS-Datei in die Erweiterung .scss umbenennen und es wird auch funktionieren. Da es der CSS-Syntax folgt, ist es sehr einfach zu lernen und zu arbeiten.