Sass bietet zwei unterschiedliche Syntaxen:
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 :.
- // Variable
- ! Primärfarbe = Hotpink
- // Mischen
- = Rand -Radius(!Radius)
- -webkit-border-radius = !radius
- -moz-border-radius = !radius
- Grenzradius = !Radius
- .mein-element
- color = !Primärfarbe
- Breite = 100 %
- Überlauf = ausgeblendet
- .mein-anderes-element
- +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.
- // Variable
- $Grundfarbe: Hotpink;
- // Mischen
- @mixin border-radius($radius) {
- -webkit-border-radius: $radius;
- -moz-Grenzradius: $radius;
- Grenzradius: $radius;
- }
- .mein-element {
- Farbe: $Primärfarbe;
- Breite: 100 %;
- Überlauf versteckt;
- }
- .mein-anderes-element {
- @include Randradius (5px);
- }
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.
