Frage Gebrauch von SASS / Live-Preview

[YannicC]

Hallo,

ich bin Grafikdesign Student und beschäftige mich seit nunmehr zwei Monaten intensiv mit dem Thema Webdesign / Webdevelopment. Ich habe die Grundlagen von HTML und CSS bereits verinnerlichen können und bin nun an einem Punkt angelangt, an dem ich begonnen habe mich mit SASS/SCSS auseinander zu setzen. Nun zu meinem Problem:

Während meiner bisherigen Arbeit entschied ich mich neben einiger Versuche mit VS und Brackets, schließlich dazu Adobe Dreamweaver zur Webentwicklung zu verwenden. Zum einen, da ich mit dem Aufbau anderer Adobe Software bereits vertraut war und mir außerdem vor allen Dingen die Live-Preview Funktion, die in Dreamweaver standardmäßig implementiert ist, wichtig war. Für die Arbeit mit SASS stellte sich das Programm allerdings als relativ ungeeignet heraus, weil die jeweiligen Befehle nicht wie bei der standardmäßigen Bearbeitung im CSS-Format erkannt werden und auch die Preview-Funktion unter dem benötigten Zwischenschritt der Kompilierung leidet.

Nachdem ich mich daraufhin erneut mit Microsoft VS und Brackets auseinandergesetzt habe, die sich für die Arbeit mit SASS besser eignen, blieb jedoch meine Suche nach einer brauchbaren Live-Preview Funktion, für die man nicht zuerst die Datei abspeichern muss, erfolglos. Gibt es eine Software, die sowohl im Code-Bereich, als auch der Preview-Ansicht einiges zu bieten und zudem eine Art 'Autocompiler' zwischen SASS und CSS integriert hat? Beispielsweise bei codepen.io ist selbst bei Nutzung der SASS-Schreibweise eine Live-Preview verfügbar, das müsste doch eigentlich auch in tatsächlicher Webdesign-Software möglich sein. Oder ist es generell überhaupt nötig, auf CSS Präprozessoren wie SASS zurückzugreifen? Bisher kam ich auch gut ohne klar, jedoch kann ich den Mehrwert für größere Projekte nur schwer einschätzen.

Abgesehen davon stellte ich mir von Anfang an die Frage, ob es im Bereich des Webdevelopment Gang und Gäbe ist, keine direkte Live Preview für die Erstellung einer Website zu benutzen, sondern es meistens tatsächlich über den umständlicheren Weg des 'Arbeiten'-'Abspeichern'-'Preview-ansehen' - 'Arbeiten'-'Abspeichern'-'Preview-ansehen' etc. läuft? Zumal bei meiner Recherche dem Thema einer Live-Preview relativ wenig Beachtung geschenkt wurde. Für mich aus der Design-Perspektive ist das kaum vorstellbar, zumal es beim schreiben im CSS um die gestalterische Ausarbeitung geht und selbige durch eine fehlende Live-Ansicht enorm erschwert wird.

Für jede Hilfe und Information wäre ich sehr dankbar.

Viele Grüße
Yannic

 

[Tronjer]

Live-Preview hat beim Dreamweaver schon vor 10 Jahren nichts getaugt. Das konnte nämlich nur statisches HTML anzeigen. Statt dessen setzt man lokale Webserver ein. Falls du als Grafikstudent auf dem Mac arbeitest, ist dort höchstwahrscheinlich Python installiert. Wechsel im Terminal in das Verzeichnis deines Projekts und gib

python -m SimpleHTTPServer 3000

ein. Anschließend hast du einen Webserver auf localhost:3000

Was deine andere Frage betrifft, so arbeitet man heutzutage mit Frameworks oder baut sich selber eine entsprechende Umgebung mit Taskrunnern wie Gulp oder Webpack, die JS und Sass bei jeder Dateiänderung kompilieren. Dazu verwendet man IDEs, welche Files automatisch abspeichern. Manuelles speichern und Browserresfresh sind nicht mehr notwendig.

Sass ist wichtig, weil es CSS dynamisiert und viele kleine Stylesheets zu einem einzigen großen kompilieren kann.

Hinsichtlich IDEs gibt nur zwei empfehlenswerte. Entweder die Produkte von Jetbrains (Intellij, Webstorm, Phpstorm) oder alternativ dazu das kostenlose VS Code. Der Rest ist für die Tonne.

 

[YannicC]

Vielen Dank schonmal! Einen Live-Server hatte ich sogar schonmal nach Anleitung eingerichtet, allerdings auf Grund dessen, dass trotzdem ein ständiges Speichern der Datei zum updaten der Ansicht notwendig war, nicht weiter beachtet. Der Schritt wäre aber zumindest getan...

Zudem hatte ich einmal eine vorprogrammierte Extension für VS Code heruntergeladen, die automatisch nach jeder Änderung des Dokuments abspeichert, um dem Problem entgegenzuwirken, allerdings war die leider sehr fehlerbehaftet. Eine direkte Anleitung, wie das über Gulp oder Webpack funktioniert, habe ich jetzt nicht auf Anhieb finden können, könntest du mir das vielleicht näher erläutern oder einen Link zur Verfügung stellen?

Was ich gefunden hatte, war eine generelle Anleitung zur Verwendung von Gulp für die Kompilierung von SCSS zu CSS Files. Am Ende der Erklärung war außerdem von einer watch-Eigenschaft die Rede, mithilfe derer Änderungen automatisch erkannt werden würden. Selbiges hatte ich bei einer Kompilierung über node.js bereits einmal versucht, ebenfalls mit einer watch-Eigenschaft versehen, allerdings war trotzdem noch ein manuelles Speichern nötig. Wahrscheinlich ist das auch gar nicht mit 'watch' gemeint, was ich mir erhofft hatte - oder ich habe etwas falsch gemacht.

Mit VS Code wäre ich zumindest bereit loszulegen, der Live-Server ist eingerichtet, fehlt nur noch, dass Dateien automatisch abgespeichert werden (die generelle Einrichtung von Gulp zur Kompilierung wäre wie erwähnt denke ich nicht das Problem).

EDIT: Danke, bin gerade nochmal deinem Hinweis bzgl. der integrierten Autosave Funktion bei vernünftigen IDE's gefolgt und hatte zuvor vollkommen übersehen, dass so eine Funktion bereits in den Einstellungen von VS Code festlegbar ist. Damit wäre eigentlich fast alles geklärt, die Live-Preview klappt dank Live Server und Autosave bereits einwandfrei! :) Lediglich hätte ich noch eine Frage dazu, ob oder warum sich Gulp zum kompilieren eher anbietet als bspw. node.js was ich vorher irgendwo gelesen hatte?

 

[Tronjer]

Das ist kein Widerspruch. NodeJS wird zumeist mit zusätzlichen Librairies/Frameworks verwendet und gehört auch zu den Requirements von Gulp.

Taskrunner wie Gulp können eine Vielzahl von Dateioperationen durchführen, wie kompilieren, verknüpfen, minifien, kopieren, watchen, etc. Man verwendet sie dann, wenn kein Framework zum Einsatz kommt, welches diese Funktionalität von Hause aus mitbringt.

 

[YannicC]

Ah okay ich verstehe! Damit wäre dann alles geklärt. Vielen Dank nochmal!!