Es gibt nicht nur eine Syntax, in der Sie SASS verwenden können, sondern zwei: Zum einen hat man die ursprüngliche Form, die gern „indented syntax“ („eingerückte Syntax“) oder einfach „SASS“ genannt wird. Daneben gibt es eine neuere Variante, die sich stärker an den Vorgaben von CSS orientiert und die man deshalb Sassy CSS (SCSS) nennt – also CSS nach Art von SASS. Mit Version 3 von SASS hat man SCSS als offizielle Syntax festgelegt. Der größte Unterschied: die Verwendung von Klammern und Semikolons.
Die ursprüngliche SASS-Syntax arbeitet mit Einrückungen und Zeilenumbrüchen, ein Vorgehen nach dem Vorbild von YAML. Um eine Codezeile abzuschließen, reicht es, einen Zeilenumbruch zu machen – also die Enter-Taste zu drücken. Einrückungen funktionieren ganz einfach über den Tabulator. Durch Änderung der Position im Schriftbild werden also Gruppierungen gebildet – sogenannte Deklarationsblocks. Das geht bei CSS selbst nicht. Hier müssen geschweifte Klammern für die Gruppierungen und Semikolons für die Eigenschaftsdeklarationen benutzt werden. Und genau das ist auch bei SCSS notwendig.
So wird daraus ein Glaubenskrieg: Einige Nutzer schwören auf die einfache Handhabung des Original-SASS, bei der man beim Verschieben von Quelltextschnipseln nicht auf die richtige Setzung von Klammern achten muss und generell einen schlankeren, übersichtlicheren Code erzeugt. Insgesamt kommt man durch die „indented syntax“ mit weniger Zeichen und Zeilen aus. Die Anhänger von SCSS hingegen nehmen den zusätzlichen Aufwand gern in Kauf, denn dieser ähnelt mehr dem, was man ohnehin von CSS kennt.
SCSS ist eine Obermenge zu CSS, und das sorgt dafür, dass CSS-Code grundsätzlich auch in SCSS funktioniert – allerdings nicht andersherum. Die Funktionen von SASS sind dennoch noch voll enthalten. So lässt sich leichter mit beiden Sprachen gleichzeitig arbeiten. Zudem ist für Menschen, die ohnehin schon mit CSS arbeiten und sich an die Syntax gewöhnt haben, die Umstellung sehr viel leichter. Zwar unterstützt SASS beide Syntaxen, pro Projekt müssen Sie sich aber entscheiden: Um die verschiedenen Formate unterscheiden zu können, gibt man den Dateien entweder die Dateiendung .sass oder .scss.