CSS / SASS / SCSS
Last updated
Last updated
Durch plain CSS kรถnnen schnell deine Stylesheets an Grรถsse gewinnen und unรผbersichtlich werden. SASS und SCSS dienen dir als Preprozessoren Struktur und Ordnung hineinzubringen und lassen sich dementsprechend kรผrzen. Zusรคtzlich erweitern Sie CSS mit Programmierfunktionen:
Variabeln (variables)
Verschachtelungen (nestings)
Operatoren
Mixins, Extends, Funktionen, usw.
Angular und Ionic setzen voll und ganz auf SCSS.
Ein Preprocessor nimmt deine SCSS-Datei und wandelt Sie in eine herkรถmmliche CSS-Datei um. Denn dein Browser versteht nur CSS, kein SASS oder SCSS. Es gibt diverse Programme die dir diese Umwandlung abnehmen, egal ob Terminal, Programm oder in Ionic direkt - die Idee bleibt die gleiche. Im Beispiel unten ist zu sehen, dass SASS Tabulatoren verwendet, SCSS jedoch Klammern. In der Fachliteratur wird daher oft SASS synonym mit SCSS beschrieben.
Codebeispiel:
Neben der oben beschriebenen Sass-Syntax (indented syntax) verfรผgt Sass รผber die neuere und heute weiter verbreitete SCSS-Syntax (Sassy CSS). Hier sind fรผr die Verschachtelung der Selektoren nicht die Einrรผckung des Quelltextes ausschlaggebend, sondern wie in der klassischen CSS-Schreibweise die geschweiften Klammern. Auch sind am Ende der Regeln Semikola erforderlich. Was kann der Browser anzeigen: HTML, CSS & JS ... aber nicht PUG/Jade, SCSS/SASS oder Typescript.
Du kannst ganz einfach Variablen in Sass definieren. Oft werden Variablen fรผr Grรถssen oder Farben verwendet.
Wird zu CSS Code kompiliert:
Bei der Verschachtelung kann man sich einiges an Platz sparen und wie im HTML DOM die effektive Struktur der Seite stylen.
Wird zu CSS Code kompiliert:
Operatoren sind eine ziemlich nรผtzliche Sache.
Die SCSS-Datei
wird zur CSS-Datei: