Ich lerne HTML: CSS vs. SCSS

Want create site? Find Free WordPress Themes and plugins.

CSS bietet viele Möglichkeiten um das Design und Layout einer Webseite zu beeinflussen. Ohne CSS kommt heute keine moderne Webseite mehr aus. Durch CSS ist es sogar möglich Bewegung in eine Webseite zu bringen, was früher nur mit Flash möglich war. Jedoch hat CSS auch Grenzen.

Oft muss Code für verschiedene Elemente wiederholt werden oder noch mal geschrieben werden. Oder wenn ein Farbschema geändert werden soll, muss bei CSS der gesamte Code nach den Farben durchsucht und bearbeitet werden. Ein sehr hoher Aufwand, der viel Zeit kostet. Durch die unterschiedlichen Techniken und Interpretationen von den Browsern, kommt ein weiteres Problem hinzu. Bestimmte CSS Codes müssen für jeden Browser separat geschrieben werden. Ein enormer Aufwand.

Anzeige:

Aber geht es auch einfacher? Ja mit SCSS.

SCSS

Was ist nun der große Unterschied von CSS zu SCSS. Die grundlegende Syntaxe ist identisch. Der Vorteil liegt im Verschachteln und bei der Nutzung von Variablen. Weiterhin ist es möglich Mixings zu erstellen, womit wiederholender Code einfach erstellt und an verschiedenen Stellen eingefügt werden kann, ähnlich wie Funktionen in anderen Programmiersprachen. Somit ist es dem erstellter besser möglich Strukturierten Code zu schreiben. Durch das Compilieren am Ende, wird ein optimaler Code generiert.

Leider wird der SCSS Code nicht direkt von den Browsern gelesen und muss erst kompiliert werden. Dabei gibt es aber einen weiteren Vorteil. Der Code kann gleich als komprimierter und optimierter CSS Code ausgeben werden. Das verringert die Größe und Ladezeit. Dabei werden auch entsprechende Verschachtelungen oder wiederholende Definitionen für Klassen zusammen gefasst. Um den Code kompilieren zu lassen, musst du entweder ein entsprechendes Programm auf dem Rechner haben oder du installierst den SASS Compiler auf deinem Rechner. Entsprechende Hinweise findest du hier.

Einen richtig großen Vorteil bringt dir der Einsatz von SCSS Frameworks. Diese bringen viele Mixins mit, die du direkt nutzen kannst. Somit schreibst du nur noch eine Zeile in der SCSS Datei und der Compiler bildet daraus den CSS Code mit allen Browserspezifischen Präfixes. Ich setze bevorzugt Compass dafür ein. Das Framework bietet für fast alle Lebenslagen die notwendigen Mixins und hat eine gute Dokumentation.

In einem extra Beitrag, zeige ich euch die Syntax und die Installation von Compass und SCSS.

 

Did you find apk for android? You can find new Free Android Games and apps.

Kommentare

Close