CSS,SCSS oder SASS

Unterschiedliche Stylesheets im Vergleich

Gibt es eigentlich eine alternative zu CSS, um effizienter beim Designen zu arbeiten? Die Antworten lauten mitunter SCSS und SASS. Natürlich gibt es noch viele weitere Erweiterungen oder nützliche Tools. Genannt seien davon einmal Less, Sylus und Compass. Es haben sich mit der Zeit zum Standard CSS (Cascade Style Sheet) einige Erweiterungen bekannt gemacht. Ich werde hier allerdings nur auf die Unterschiede und Vorteile von SASS und SCSS eingehen. Sie machen den ersten und meiner Meinung nach wichtigsten Schritt und erweitern CSS um grundlegende Vereinfachungen und Funktionen.

Die Frage die sich nun stellt ist natürlich, ob nun zwingend SASS oder SCSS benutzt werden müssen und dem eigentlichen Grundstein CSS der Rücken zugewendet werden sollte. CSS ist klar strukturiert und funktioniert zuverlässig. Auch heute wird CSS immernoch zum großteil verwendet. Doch was ist der Unterscheid zu SASS oder SCSS ? Die schnell sichtbaren und großen Vorteile sind Variablen, vereinfachte Schreibweise, Funktionen und ebenfalls Mixins und Nesting. Dadurch wird die Sprache allerdings um einiges komplexer als das ursprüngliche CSS, was aber durch die Benutzerfreundlichkeit und Umsetzungsvielfalt wieder wett gemacht wird.

Schauen wir uns einmal grundlegend an einem einfachen Beispiel an wie SCSS und SASS im Gegensatz zu CSS aussehen.


Beispiel CSS3
.class  {
	font-family : sans;
	font-size : 110%;
	color : #FF0000;
	border-color : #FF0000;
}

Beispiel SCSS
$cred: #FF0000;
.class {
	font  {
		family : sans;
		size : 110%;
	}
	color : $cred;
	border-color : $cred;
}

Beispiel SASS
$cred: #FF0000;
.class
	font
		family : sans
		size : 110%
	color : $cred
	border-color : $cred

SCSS (Sassy CSS)

SCSS ist grundsätzlich ein Superset von CSS. Das wiederum bedeutet das alle Funktionen von CSS in SCSS enthalten sind. SCSS wurde des weiteren um Funktionen von SASS erweitert und kann damit mehr als das 'normale' CSS. Das bedeutet für die Benutzung und Konvertierung von Dateien, dass jede valide CSS-Datei auch eine valide SCSS-Datei ist. Damit bildet SCSS einen wunderbaren Übergang zwischen CSS und SASS. Allerdings lässt sich so auch schnell argumentieren, das SCSS gar nicht wirklich benötigt wird, da SASS optimierter ist und beide ca. den gleichen Umfang besitzen. Allerdings ist dies natürlich immer dem Nutzer überlassen. Denn einige Dinge, auch im Bezug auf Nesting oder Mixins, lassen sich im SCSS deutlicher und klarer lesen.

SASS (Syntactically Awesome Style Sheet) und DRY-Code

SASS ist genau wie Less oder SCSS ein CSS-Präprozessor und erleichtert den Aufbau von eigentlich großen und komplexeren CSS Dateien. Es erweitert CSS und Funktionen, Verschachtelungen (Nestings), Variablen, Mixins, etc. Große unübersichtliche Dateien werden so schnell Übersichtlich und leichter zu editieren. Anstatt beispielsweise den gleichen Wert mehrere Male abzuändern, kann die Variable einmal geändert werden und etliche Minuten und vorallem Fehler sind gespart. SASS bietet gegenüber SCSS nur noch Unterschiede in der UI. Es gibt keine weiteren FUnktionen oder große Unterschiede, denn es wird hauptsächlich Schreibarbeit gespart. Wichtig ist bei SASS durch das fehlen der Klammern und Semikolons darauf zu achten das alle Elemente richtig eingerückt sind, ansonsten kommt es schnell zu Fehlern.

Damit SASS, SCSS oder eine andere Präprozessor Sprache überhaupt auf dem Server läuft und verwendet werden kann, muss SASS entsprechend installiert werden. Dies ist von Nöten, da SASS zuerst in ein Abstract Syntax Tree konvertiert wird, um danach in gültiges CSS umgewandelt und ausgegeben zu werden. Eine Anleitung zur Installation von SASS oder einige Programme die SASS Interpretieren können findet ihr Hier.

DRY

Oft wird im Zusammenhang mit SASS oder anderen Programmiersprachen von DRY-Code gesprochen. Doch was bedeutet DRY eigentlich. In kurz : Dont't repeat yourself. In etwas ausführlicher würde das bedeuten, dass jedes Programm oder eher gesagt jede Syntax so ordentlich und einfach gehalten werden sollte wie möglich. Anstatt etliche male die Farbe grau zu verwendet um diese bei Änderungswünschen dann immer und immer wieder abzuändern, sollte eher eine Variable im Kopfbereich verwendet werden, welche nachträglich nur an einer Stelle angepasst werden muss. Ebenso gilt DRY für Verschachtelungen und Mixins. Wenn etwas mehrfach vorkommt, kann man dies auch zusammenführen und einmal definieren.

Nicht nach dem DRY Konzept zu arbeiten macht den Code nicht schlimm oder schlechter als den von anderen, aber es lässt ein leichteres Verständnis des Codes zu und vereinfacht Änderungen in vielen Punkten. Es spart also nicht nur einem selber Zeit, sondern auch Leuten die sich später mit diesem Code beschäftigen könnten. Bei Code der optimiert werden kann, wie eben erklärt, was zudem auch für Funktionen gilt, spricht man zudem von WET-Code.

Mixins / Nesting

Mixin und Nesting sind zwei Dinge die ich an SCSS und SASS sehr bevorzuge. Es ist so simple und hilfreich und dennoch kein Standard bei CSS. Mixins heißt grob übersetzt Ansammlungen und Nesting bedeutet Verschachtlung. Beide Erweiterungen sind ungemein hilfreich und ermöglichen es CSS wesentlich komplexer und intensiver zu nutzen. Zuerst einmal ein Beispiel von Mixin um den ganzen ein Bild zu geben.


Beispiel CSS3
.menu-background  {
	font-family : sans;
	font-size : 110%;
	background-color : black;
	opacity : 0.5;
	display : block;
}

Beispiel SCSS
@mixin bgsetting() {
	font-family : sans;
	font-size : 110%;
	background-color : black;
	opacity : 0.5;
	display : block;
}
.menu-background {
	@include bgsetting();
	color : red;
}
.nav-background {
	@include bgsetting();
	color : blue;
}

Beispiel SASS
-bgsetting()
	font-family : sans
	font-size : 110%
	background-color : black
	opacity : 0.5
	display : block

.menu-background
	+bgsetting()
	color : red

Wie man sehen kann ähneln sich SCSS und SASS wieder stark. Was aber genau wird gemacht? Hier wurde nichts anderes gemacht als einzelne Werte unter einen Begriff anzusammeln und jedes Mal wenn benötigt an eine Klasse weiterzugeben. Dies ermöglicht in diesem Beispiel etwa, im Bezug auf SCSS, den Klassen menu- und nav-background die gleichen 5 Werte zu übergeben und zusätzlich dazu einen Wert für die Schriftfarbe anzugeben. Hat man nun mehrere solcher Stellen verkürzt sich der Code allgemein. Im Zusammenarbeit mit dem Import können Mixins somit ungemein Arbeit erleichtern und zentral in einer Datei gesammelt und verwaltet werden.

Ein weiterer Vorteil von Mixins ist die Übergabe von Parametern. Der Aufbau des Mixins erinnert stark an den einer Funktion. Dies bedeutet das die gleiche Funktion für unterschiedliche Werte genutzt werden kann. Im folgenden ein Beispiel im SCSS Format. In dem Beispiel wird ein Mixin setting mit der Variablen param erstellt. Wird dieses nun included, so wird ein Parameter überwartet, welcher dann wiederum im Mixin die Farbe für die Schrift und für die Grenzfarbe des Containers bestimmt.


Beispiel SCSS
@mixin setting($param) {
	font-size : 80%;
	border-color : $param;
	opacity : 0.5;
	color : $param;
}
.menu-background {
	@include setting(red);
}
.nav-background {
	@include setting(green);
}

Nesting wiederum ist eine gänzlich andere hilfreiche Erweiterung, welche sich auch wunderbar mit dem Mixins kombinieren lässt. Grundsätzlich bedeutet es nichts weiter als dass eine Klasse oder ein Element in einem anderen sitzt und so weiter. unter CSS gab es auch die Syntax die ähnlich einer Verschachtelung funktioniert. Durch ein Beispiel lässt es sich besser darstellen und es wird schnell klar was die Verschachtelung ist und wie diese unter SASS oder SCSS aussieht. SASS wird hier weggelassen, da dort nur die Klammern und Semikolons fehlen würden.


Beispiel CSS3
div span  {
	font-family : sans;
	font-size : 110%;
	display : block;
}
div ul  {
	list-style : square;
}
div li  {
	font-size : 150% !important ;
	color : red;
}

Beispiel SCSS
div{
   span{
      font-family : sans;
	   font-size : 110%;
	   display : block;
   }
   ul{
      list-style : square;
   }
   li{
      font-size : 150% !important ;
	   color : red;
   }
}

Fazit

Natürlich ist der Umfang für SASS noch etwas größer. Wörter wie Import oder Operatoren nur einmal hereingeschmissen, aber für einen generellen Überblick über SASS und SCSS ist dies ausreichend. Allgemein werde auch ich weiterhin CSS nutzen, allerdings immer wieder mit SASS experimentieren. SCSS erweitert CSS sinnvoll und einfach. Alleine die Verwendung von Variablen und der vereinfachten Schreibweise, spart vor allem bei großen Dateien Speicherplatz und Zeit beim Designen. Das gleiche gilt natürlich bei SASS, wobei bei kleineren bis mittleren Websites der Umfang von SASS schon zu groß ist.

Versteht man die Syntax von CSS und kennt die Parameter, so ist der Umschwung auf SCSS oder SASS kein großes Problem. Notwendig sind diese Erweiterungen natürlich nicht, aber sie vereinfachen manche Darstellungen ungemein. Bei SASS erhöht sich aber auch leider die Fehlerratio, wenn man nicht geübt im Umgang mit einrücken und positionieren ist.


Weitere Quellen / Informationen :
Offizielle Sass Guide
Sass Dokumentation

Autorbild
Veröffentlicht von Robin Kirch am 04.2019
Web- und Softwareentwickler, Systemadministrator und Bughunter aus Leidenschaft.
#css #sass #scss #design #nesting #mixin
Fandest du den Beitrag hilfreich? Dann teile ihn doch mit anderen

Aufgrund von Artikel 17 (ehemals Artikel 13) der EU ist es nicht weiter effizient die Kommentarsektion zu betreiben. Bei Fragen nutzen Sie bitte das Kontaktformular. Ich werde nach wie vor gerne Fragen beantworten.