Hallo!
In diesem Video zeige ich Ihnen die Vorteile von CSS-Präprozessoren.
Was ist ein CSS-Präprozessor?
Ein Präprozessor ist ein separates Dokument, das eine ähnliche Sprache wie CSS verwendet, aber Möglichkeiten bietet, die ein normales CSS-Stylesheet nicht zulässt.
Präprozessoren werden hauptsächlich verwendet, um Wiederholungen zu umgehen und so effizienter zu arbeiten.
Hurra!
In einem typischen CSS-Stylesheet wiederholen sich oft CSS-Properties wie Farbe, Größe und Position.
Ein Präprozessor bietet viele Techniken, mit denen sich diese Wiederholungen vermeiden lassen.
Das werden wir uns in diesem Video ansehen.
Wir benötigen weiterhin unser herkömmliches CSS-Sheet.
Daran führt kein Weg vorbei.
Aber wir können Maßnahmen treffen, bevor das CSS-Stylesheet generiert wird.
Wir schalten eine Vorverarbeitung („Präprozess“) vor das CSS – daher der Name.
Wir arbeiten an dieser Website hier.
Sehen wir uns zunächst die Struktur in Dreamweaver an.
Hier ist der Quell-Code der fertigen Website.
Ich befinde mich im Modus „Entwickler“ (Developer).
Ich habe die Site außerdem in Dreamweaver definiert, zur Verwaltung der Projektdateien.
Sie müssen dasselbe tun, damit Sie mir hier folgen können.
Wählen Sie dazu im Menü „Site“ die Option „Neue Site“ (New Site).
In einem anderen Video wird die Definition von Sites erläutert, falls Sie dabei Hilfe benötigen.
Dies ist der HTML-Code der Website in der Ansicht „Quellcode“ (Source Code).
Über die Dokumentleiste rufe ich die Datei „styles.css“ auf.
Es ist ein standardmäßiges CSS-Sheet.
Ich suche nach Instanzen der Farbe Weiß, also dem Farbwert „#fff“ wie in Zeile 102 und in Zeile 116.
Wenn ich ihn markiere und im Menü „Suchen“ (Find) „Suchen und ersetzen“ (Find and Replace) wähle, findet Dreamweaver zwölf Instanzen dieses Farbwerts.
Für eine so kleine Website ist das eine ganze Menge.
Für solche Fälle ist ein Präprozessor ideal.
Ich schließe diese Datei – es ist die fertige Version – und öffne eine der Anfangsversionen.
Ich öffne die Datei „rendered-index.html“ und starte die Vorschau im Browser.
In dieser Version ist der Text oben schwarz, in der Mitte ebenfalls, und auch der Text im Footer ist teilweise schwarz.
Den möchte ich weiß machen, und zwar mit einem Präprozessor-Trick.
„Präprozessor“ ist ein richtiger Zungenbrecher ...
Zurück zu Dreamweaver.
Zunächst erstelle ich den CSS-Präprozessor.
Im Bedienfeld „Dateien“ (Files) sehen Sie, dass diese Website recht schlicht ist.
Es gibt eine Index-Seite, die Datei „styles.css“ und noch ein paar Ordner.
Das war's.
Nur zwei Dateien im Stammverzeichnis.
Erstellen wir nun den CSS-Präprozessor, und sehen wir, was passiert.
Im Menü „Datei“ (File) wähle ich „Neu“ (New).
Zur Auswahl stehen u. a.
LESS, SCSS oder Sass.
Alle drei funktionieren ähnlich.
Sie bieten die eben erwähnten Vorteile, nur die Syntax ist jeweils anders.
Ich verwende die neueste Version: SCSS.
Warum?
Weil die Sprache regulärem CSS am meisten ähnelt und Web-Designern vertraut ist.
Ich klicke auf „Erstellen“ (Create) und speichere die Datei unter dem Namen „scss-styles.scss“.
Sie können einen beliebigen Namen wählen.
Ich klicke auf „Speichern“ (Save).
Hier ist meine Datei.
Es wurde aber automatisch eine zusätzliche CSS-Datei generiert.
Praktisch ist: Dreamweaver leistet die ganze Vorarbeit beim Kompilieren.
Als ich mich zum ersten Mal mit Präprozessoren befasst habe, habe ich sie zwar gleich verstanden und ihre Vorteile erkannt.
Aber sie waren aufwendig.
Man musste dafür z.
B.
Befehlszeilen-Compiler und andere Dinge konfigurieren.
Alles etwas mühsam.
Die Integration in Dreamweaver macht jetzt alles viel einfacher.
Hier haben wir also unser CSS-Sheet, das schon etliche Anweisungen enthält.
Wenn Sie eine neue Site erstellen, haben Sie vermutlich noch kein CSS-Sheet.
Sie können dann einfach ein SCSS-Sheet anlegen und die Datei verwenden, die daraus kompiliert wird.
Ich werde beide parallel verwenden, um das zu demonstrieren.
Zunächst erstelle ich eine sogenannte Variable.
Variablen werden einfach mit einem Dollarzeichen eingeleitet und können einen beliebigen Namen haben.
Leerzeichen oder Sonderzeichen sind nicht zulässig.
Verwenden Sie Zahlen und Buchstaben, und schließen Sie mit einem Doppelpunkt ab.
Ich besetze diese Variable mit einem Farbwert, in diesem Fall „#fb00b4;“.
Die Syntax ist CSS-Code sehr ähnlich, was die Sache erleichtert.
Falls Sie Variablen noch nie verwendet haben: Hier wird einfach der Farb-Code mit dem Namen „$primary-color“ verbunden.
Das Praktische an dieser Variable ist, dass ich sie unzählige Male für die Website verwenden kann und nur über diese eine kleine Zeile steuere.
Wenn ich sie einmal ändere, werden alle Instanzen ebenfalls angepasst.
Kein Suchen und Ersetzen mehr.
Immer noch unsicher, was eine Variable macht?
Wenn wir sie anwenden, wird alles klarer.
Was möchte ich damit formatieren?
Ich wechsle zum HTML-Code.
Ich möchte den Text formatieren, der in der Klasse „hero“ enthalten ist.
Ich möchte die schwarze Textfarbe in die Farbe ändern, die ich über die Variable definiere.
Dasselbe werde ich für den Footer festlegen.
Im SCSS-Stylesheet gebe ich einen Punkt ein, dann den Klassennamen „hero“ und geschweifte Klammern.
Ich tippe „color“ ein.
Das Wort „color“ alleine steht für die Schriftfarbe.
Nun noch einen Doppelpunkt.
Ich könnte die neue Farbe über den Farbwähler bestimmen, aber bei diesem Beispiel geht es ja darum, wiederkehrende Arbeitsschritte zu umgehen.
Ich werde daher die Variable verwenden.
Wie zuvor gebe ich das Dollarzeichen ein, gefolgt von „primary-color“ und einem Semikolon.
Was bedeutet das?
Die Variable fungiert wie ein Platzhalter.
Wann immer die Variable „$primary-color“ verwendet wird, wird der Farb-Code angewendet, der in der Variable definiert ist.
Das macht Dreamweaver beim Kompilieren des CSS.
Wir befinden uns noch im SCSS-Stylesheet.
Sehen wir uns die kompilierte CSS-Datei an.
Ich öffne sie.
Dieses CSS-Stylesheet wurde automatisch auf Basis des SCSS-Sheet erzeugt.
Es ist ein reguläres CSS-Stylesheet, das Webbrowser verstehen.
Der Farb-Code steht jetzt dort, wo vorhin der Platzhalter war.
Dieses CSS-Sheet muss ich mit meiner Seite verknüpfen.
Dazu rufe ich die HTML-Datei auf.
Hier oben wird das vorhandene CSS-Stylesheet referenziert.
Die neue Datei möchte ich hier ebenfalls hinzufügen.
Ich setze meinen Cursor in die Zeile und drücke Befehl+D auf dem Mac bzw.
Strg+D auf einem PC, um sie zu duplizieren.
Ich lösche diesen Dateinamen und füge den Namen der neuen Datei ein.
Nun sind beide verknüpft.
Oben wird das ursprüngliche CSS-Sheet referenziert, darunter die vom Präprozessor generierte Datei.
Ich verknüpfe also nicht das SCSS-Sheet direkt, sondern die Datei, die Dreamweaver kompiliert.
Sie hat denselben Namen, weist aber die Erweiterung „.css“ auf.
Ein Blick in den Browser ...
Da!
Das komische Pink.
Jetzt passe ich schwarzen Text im Footer an.
Ich wechsle zurück zum Präprozessor und ergänze ihn.
Ich gebe die ID des Footers ein.
Die Schriftfarbe soll der Variable entsprechen.
Ich kopiere den Variablennamen, damit ich mich nicht vertippe.
In der Browser-Vorschau ist der Footer jetzt pink.
Nochmals zur Erinnerung: Ich verwende mein SCSS-Sheet, um dieses CSS-Sheet zu generieren.
Da ist es.
Mit meinen Farben.
Und darauf greift meine HTML-Seite zu.
Wozu dieser zusätzliche Schritt?
Es ist keiner.
Dreamweaver kompiliert das CSS-Sheet automatisch und führt es mit dem HTML-Code zusammen.
Ich selbst arbeite nur am SCSS-Sheet.
Und warum?
Weil Variablen extrem praktisch sind.
Dieses kleine Beispiel lässt erahnen, wie leicht sich Änderungen umsetzen lassen an so etwas wie „$primary-color“ mit Millionen von Instanzen in einem Dokument.
Ich muss nicht erst eine Suche starten, um alle Instanzen zu finden.
Ich navigiere zur Variable mit dem schicken Pink, ändere die Farbe, z.
B. in „#fff“ für Weiß, und speichere.
Der CSS-Code wird generiert, und die Echtzeitvorschau im Browser wird aktualisiert.
Der Text ist weiß!
Und zwar nicht nur im Footer, sondern auch im Header.
Dies funktioniert nicht nur für die Schriftfarbe, sondern auch für Schriftart, Laufweite, Auffüllung oder Ränder.
Variablen bieten Ihnen die Möglichkeit, Properties für die ganze Website zentral zu steuern.
Außer Variablen bieten Präprozessoren weitere fantastische Möglichkeiten.
Eine davon ist das Verschachteln von Elementen.
Durch Verschachteln lassen sich CSS-Selektoren an die Hierarchie anpassen, die im HTML-Code definiert ist.
Sehen wir uns das mal im HTML-Code an, hier in der Ansicht „Quellcode“.
Ich möchte eine Formatierungsanweisung für dieses UL-Element erstellen.
Diese ungeordnete Liste bildet die Navigation hier oben.
Unter anderem möchte ich die Unterstreichung entfernen, Großbuchstaben verwenden und sonst noch so einiges ändern.
Hier in Dreamweaver muss ich dafür im CSS-Code sogenannte „verbundene Selektoren“ erstellen, in diesem Fall A-Tags, die in Listen verschachtelt sind, die wiederum in ULs stecken, die im NAV-Element verschachtelt sind.
Mit Präprozessoren lassen sich solche Verschachtelungen so abbilden, dass man eine präzise Formatierungsanweisung definieren kann.
Ich kehre wieder zu meinem SCSS-Sheet zurück.
Ich möchte die Klasse „.site-nav“ formatieren, die im HTML-Code definiert ist.
CSS-Code stößt hier meist an seine Grenzen, denn Klassen lassen sich nicht verschachteln.
Der SCSS-Präprozessor kann das sehr wohl.
Ich lege einen Eintrag für das UL-Element an und für dieses UL-Element als Listenstilart („list-style-type“) „none“ (keine).
So entferne ich Aufzählungszeichen von der Liste.
Nun zu den LI-Elementen aus dem HTML-Code.
Diese LI-Tags sind im UL-Tag verschachtelt, innerhalb des NAV-Tags.
Hier sind die Klasse „.site-nav“ und das UL-Element.
Innerhalb des ULs möchte ich eine Anweisung für LIs erstellen, also für die Listeneinträge bzw.
Aufzählungspositionen innerhalb dieser ungeordneten Liste.
Ich gebe wieder die geschweiften Klammern ein und beginne die Verschachtelung: LI innerhalb von UL innerhalb von „.site-nav“.
Ich möchte einen unteren Rand („margin-bottom“) von 3,75 em.
Ich speichere das und schaue schnell auf den generierten Code.
Ich wechsle zur Datei „rendered-index.html“ und öffne das aus dem SCSS erstellte Stylesheet.
Das ist der generierte Code.
Die erste generierte Zeile betrifft das UL-Element innerhalb von „.site-nav“.
Zusätzlich wurde diese Zeile erstellt, weil ich LIs innerhalb des UL-Elements verschachtelt habe – ein verbundener Selektor für den unteren Rand.
Dieses CSS-Stylesheet wird von der Website verwendet.
Tatsächlich ist es aber das SCSS-Sheet, das den Code automatisch kompiliert und generiert.
Der Vorteil ist, dass ich die Struktur meines HTML-Codes abbilden kann, wo ja LIs innerhalb eines UL-Tags und das UL-Tag innerhalb der Klasse „.site-nav“ verschachtelt sind.
Nehmen wir noch eine letzte Änderung am SCSS-Stylesheet vor.
Ich möchte nun das A-Tag formatieren, das definiert, wie sich das Menü verhält, wenn man es anklickt.
Es sollen aber nur A-Tags formatiert werden, die in LI-Elementen verschachtelt sind, die sich wiederum im UL-Tag innerhalb des NAV-Elements befinden.
Sie sollen also innerhalb dieses LI-Eintrags rein.
Vor der schließenden geschweiften Klammer gebe ich „a“ ein, eine geschweifte Klammer und dann „font-size“ mit dem Wert 1,15 em, „text-decoration“, in diesem Fall mit dem Wert „none“, um die standardmäßige Unterstreichung zu entfernen, „letter-spacing“ mit 0,15 em sowie „text-transform“ mit dem Wert „uppercase“.
Jetzt möchte ich einen farblichen Übergang definieren.
Dazu gebe ich „transition“ und dann „color“ sowie eine Dauer von 0,3 Sekunden ein.
Weil diese Property noch sehr neu ist, brauche ich eine WebKit-Version.
Ich platziere den Cursor in die Zeile, drücke Befehl+D bzw.
Strg+D auf einem PC, ergänze das Browser-Präfix „-webkit-“ und speichere.
An dieser Stelle der Hinweis, dass wir uns auf der vierten Verschachtelungsebene befinden: A innerhalb von LI innerhalb von UL innerhalb von „.site-nav“.
Das ist in Ordnung.
Sie sollten aber nicht mehr als vier Ebenen erstellen.
Denn das wirkt sich auf die Lesbarkeit und die Performance der Website aus.
Sehen wir uns an, wie das im Browser aussieht.
Die Unterstreichung ist weg.
Großbuchstaben und Laufweite stimmen auch.
Fehlt noch die Textfarbe, die Weiß sein soll.
In Dreamweaver gebe ich „color“ ein.
Ohne Zusatz bezieht sich der Farbwert nur auf die Schrift.
Statt Weiß möchte ich nun meine clevere Variable verwenden, die ich vorhin schon eingesetzt habe.
Anstatt also den Farbwert anzugeben, gebe ich wie schon hier oben „$primary-color“ als Platzhalter ein und speichere.
Im Browser ist der Text jetzt weiß.
Wenn ich nun überall eine andere Farbe verwenden möchte, kann ich in Dreamweaver für die praktische Variable einen Rotton eintragen.
Der Wahnsinn!
Naja, nicht ganz.
Aber Sie merken, wie einfach es jetzt ist, wenn man nur eine Variable ändern muss, um den kompletten CSS-Code anzupassen.
So ein Glück!
Ich mache alles wieder weiß.
Schon erledigt.
Zum Schluss sehen wir uns einen weiteren Präprozessor-Trick an: ein Mixin.
Los geht's.
Was ist ein Mixin?
Ein Mixin erlaubt die Gruppierung von CSS-Properties, um leichter mit ihnen arbeiten zu können.
Mixins eignen sich für sich wiederholende, lange Listen von CSS-Properties.
Statt die lange Liste ständig erneut einzugeben, fasst man sie in einem Mixin zusammen und verwendet dieses kleine Mixin dann anstelle der Properties.
Das lässt sich gut am Beispiel von CSS-basierten Farbverläufen demonstrieren.
Diese Website hier enthält mehrere Farbverläufe.
Hier rechts ist die Grafikbeschreibung mit einem schönen Farbverlauf hinterlegt.
Weiter unten liegt ein weiterer Farbverlauf hinter dieser Grafik.
Und schließlich schmückt ein Farbverlauf den Footer.
Auf der Website kommen also einige Farbverläufe zum Einsatz.
Sehen wir uns den CSS-Code an, mit dem diese Farbverläufe erzeugt werden.
In Dreamweaver sieht das im fertigen Beispiel so aus.
Wenn ich von der HTML-Ansicht zum CSS-Sheet wechsle, finden wir hier oben die Klasse, die den ersten Verlauf im Beispiel beschreibt.
Sie sehen, dass zur Notation eines Verlaufs per CSS einiges zu tun ist.
Sie müssen angeben, dass er als Hintergrundbild fungiert, linear verläuft und einen Winkel hat.
Der Winkel ist in Grad angegeben.
Es gibt eine Anfangs- und eine Endfarbe.
So weit zur Notation.
Das Problem ist, dass diese CSS-Property recht neu ist, sodass sie noch nicht von allen Browsern einheitlich interpretiert wird.
Man muss die Notation also für alle Browser anpassen.
Das sind die wichtigsten.
„Moz“ richtet sich an Firefox hier.
Dann die Notation für WebKit-Browser, allen voran Chrome.
Und schließlich „ms“ für Microsoft-Browser.
Es sind also einige Wiederholungen nötig, und das bedeutet viel Text.
Auch weiter unten wird viel wiederholt, wo der zweite Verlauf definiert wird.
Und noch weiter unten das Gleiche im Footer-Abschnitt.
Für Mozilla-, WebKit- und Microsoft-Browser wiederholen wir die Browser-Präfixe immer wieder.
Das lässt sich mit einem Mixin viel eleganter lösen.
Ich lösche zunächst alle diese Zeilen aus dem FOOTER-Element.
Ich muss mir nur merken, dass es der Footer war.
Diese Info brauche ich später.
Ich merke mir also „footer“.
Gelöscht.
Weiter zum nächsten Eintrag.
Der Abschnitt heißt „.artwork-3“ gefolgt von „.artwork-piece“.
Ich brauche später nur diese beiden Namen für mein Mixin.
Der letzte Verlauf ist bei „.artwork-1“ und „.artwork-description“.
Die Farbverläufe sind entfernt.
Wie sieht nun die Website aus?
Anstelle des Farbverlaufs ist nun ein weißes Feld.
Weiter unten war ein Farbverlauf auf dieser Seite, und auch der Footer hat keinen Farbverlauf mehr.
Jetzt füge ich die Verläufe über das Mixin wieder ein.
Ich öffne die SCSS-Datei und füge hier unten ein Mixin ein.
Dazu gebe ich „@“ gefolgt von „mixin“ ein sowie ein Leerzeichen.
Der Name des Mixin kann beliebig sein.
Ich gebe „gradient“ und eine geschweifte Klammer ein und füge die CSS-Properties hier ein, die ich eben aus dem CSS-Sheet gelöscht habe.
Ich verwende sie hier.
Ich habe also ein Mixin erstellt, benannt und mit Properties befüllt, anhand dieses umfangreichen CSS-Codes für den Farbverlauf.
Nun möchte ich das Mixin anwenden.
Zunächst gebe ich die Klassennamen ein, die ich mir gemerkt habe.
Aus denen hatte ich ja die Verläufe entfernt.
Der erste Abschnitt hieß „.artwork-1“ und dann „.artwork-description“.
Ich füge eine geschweifte Klammer hinzu.
Aber anstatt diesen langen Code für den Verlauf zu tippen, füge ich einfach das Mixin ein.
Dazu gebe ich „@include“ ein und ergänze den Namen des Mixins.
Dreamweaver generiert den neuen CSS-Code.
Sehen wir uns das an.
Ich wechsle von der Ansicht „Quellcode“ mit dem HTML-Code zur generierten Datei „scss-styles.css“.
Hier wurde der Code generiert und dabei das „@include“ ersetzt durch „background-image“.
Hurra!
Überprüfen wir das im Browser.
Die vormals weiße Fläche zeigt nun einen Farbverlauf im Hintergrund.
Der volle Nutzen wird aber gleich erst deutlich, weil man das Mixin nämlich wiederverwenden kann.
Ich kehre zu Dreamweaver und zum SCSS-Sheet zurück.
Der nächste Abschnitt, aus dem ich den Farbverlauf gelöscht hatte, war „.artwork-3 .artwork-piece“.
Nach der geschweiften Klammer schreibe ich wieder nicht den kompletten Code aus, sondern gebe „@include“ ein und ergänze „gradient“.
Der CSS-Code wird generiert.
Im Browser scrolle ich nach unten: Hier ist der erste Verlauf und hier der zweite.
Langsam wird klar, warum Mixins so nützlich sind.
Ich kann umfangreichen Code in ein Mixin packen und dieses über die Anweisung „include“ anwenden, und zwar im gesamten SCSS-Sheet.
Das einzige Problem bei dieser Implementierung ist, dass die Verläufe identische Farben aufweisen.
Ursprünglich waren sie verschieden.
Das korrigiere ich mithilfe von Variablen.
Wir haben ja schon über Variablen gesprochen, und diese werde ich nun mit einem Mixin verwenden, um die beiden Felder unterschiedlich zu gestalten.
Zurück zu Dreamweaver.
Die Farbwerte sind fest im Mixin definiert.
Hier werden sie angewendet.
Ich möchte diese Farbwerte ersetzen, und zwar durch eine Variable.
Auf diese Weise kann ich später die Farbwerte variieren.
Ich erstelle zwei Variablen im Mixin, direkt nach dem Wort „gradient“.
In Klammern füge ich wie schon zuvor ein Dollarzeichen ein und nenne die Variable „$gradient-color1“.
Sie bestimmt die erste Farbe dieses Verlaufs.
Denn Verläufe beginnen immer mit einer Farbe und enden mit einer anderen.
Neben der ersten Farbe brauche ich eine zweite.
Für die zweite Variable gebe ich ein Komma ein und dann „$gradient-color2“.
Jetzt werde ich diese Variablen anwenden.
Ich ersetze den gesamten Farbwert, also „rgb“ inklusive der Koordinaten, durch eine Variable, die ich in Klammern setze.
Für die zweite Farbe gehe ich genauso vor.
Ich lösche diesen Eintrag, füge die Klammern ein und dann „$gradient-color2“.
Da diese Anweisung wiederholt angewendet werden muss für die unterschiedlichen Browser, wiederhole ich die Änderung.
Die feste RGB-Eingabe verschwindet hier.
Hier auch.
Und auch der zweite Farbwert wird gelöscht.
Weg damit.
Ich füge nun die richtige Farbe ein.
Hier. „@include“ und die Variable.
Die Variable repräsentiert den Farbwert und muss in Klammern gesetzt sein.
Die erste Farbe ist ein RGB-Rosa.
Nach dem Komma kommt die zweite Farbe – eine Art Pfirsichton.
Diese „include“-Anweisung verwendet das Mixin „gradient“, also alles das hier.
Der einzige variable Wert ist die Farbe.
Es gibt „color1“ und „color2“.
Hier unten ist die erste Farbe und hier die zweite Farbe.
Im Browser läuft aber was falsch!
Passt schon.
Zurück zu Dreamweaver.
Das Problem: Ich habe die erste „include“-Anweisung für „.artwork-1“ fertiggestellt, aber für „.artwork-3“ nicht.
Das hole ich jetzt nach.
Klammern, Anfangsfarbe – in diesem Fall Lila –, Komma und die zweite RGB-Farbe.
Ich überprüfe das im Browser und scrolle nach unten.
Hier ist der erste Verlauf von Rosa zu Pfirsich und dann dieser hier von Blau zu Lila.
Ein Hoch auf Mixins!
Jetzt fehlt noch der Footer.
„Footer“ ist ein vordefiniertes HTML-Tag und erfordert daher keinen Punkt am Anfang.
Nach den geschweiften Klammern kopiere ich diesen Eintrag über die Zwischenablage und verwende diese beiden RGB-Werte für den Verlauf.
Im Browser haben wir einen Verlauf hier, einen Verlauf hier und den Verlauf ganz unten.
Jetzt kennen Sie die Power von Mixins und wissen, wie sich diese über Variablen präzise steuern lassen.
Das war eine Einführung in CSS-Präprozessoren.
Sie haben drei tolle Funktionen kennengelernt: Variablen – ein einfaches Konzept, das ich häufig verwende.
Verschachtelungen von Klassen innerhalb anderer Klassen.
Und Mixins, mit denen sich lange Code-Fragmente auf eine einzige Zeile reduzieren lassen.
Alles das ist in regulären CSS-Sheets nicht abzubilden, aber Dreamweaver übernimmt die Kompilierung und fügt die Anweisungen im regulären CSS-Sheet ein.
Im Ergebnis werden die Variablen interpretiert, und wir erhalten verbundene Selektoren, die die Verschachtelungen im Präprozessor abbilden.
Diese langen Code-Fragmente werden in diese Klassen eingebunden.
In der SCSS-Datei muss man sich aber nur um diese eine Zeile kümmern.
Ich bin Dreamweaver außerordentlich dankbar, dass die Arbeit mit Befehlszeilen-Compilern und Konfigurationen, also der ganze Hickhack, im Hintergrund abläuft und ich effizient arbeiten kann.
Das war's zum Thema CSS-Präprozessoren – gut so, denn das Wort ist für mich echt schwer auszusprechen.
