2. Zutaten einer Website
Die magischen „S“
STRUCTURE
(HTML - serverseitig von PHP
erzeugt)
SCRIPTS
(JavaScript, jQuery)
STYLES
(Definition der Optik via CSS)
Sinn, Sicherheit,
Sexapeal, Speed,
SEO, $, ...
14. WP SCSS (WordPress Plugin)
Bindet das generierte CSS ein.
Pfade (innerhalb des
Themeordners) eintragen
15. WP SCSS
SCSS und erzeugte CSS-Datei
Mit diesem Eintrag in der wp-config.php
kompiliert das Plugin WP-SCSS „selbsttätig“
16. SASS (shell)
Sass wartet in der Shell auf Änderungen der
SCSS-Datei und erzeugt eine neu kompilierte CSS-Datei
mit integrierten Kommentarzeilen für ein
leichteres Debugging.
(mit den Parametern -l bzw --line-numbers und --watch gestartet)
Läuft auf dem Server
(Root-Server, localhost / Linux, Windows, Mac
– nicht auf shared hosting)
Installationsanleitung: http://sass-lang.com/install (Command Line)
17. Browser / Debug (Firebug)
CSS-Datei: Ausgabe vom SASS-Präprozessor
Das Plugin WP-SCCS generiert diese
Kommentarzeilen leider nicht.
Mit dem Browser-Add-on Firebug und
FireCompass für Firebug
finden sich schnell die Zeilen-Nr der originalen
SCSS-Datei.
18. Online
http://sass-lang.com/
Links auch zu den Präprozessoren (Koala, Compass, Scout …)
und Command-Line-Tools, Dokumentation
https://wordpress.org/plugins/wp-scss/
https://wordpress.tv/2015/10/09/bernhard-kau-
beginners-guide-sass/ (EN)
https://wordpress.tv/2015/06/25/bernhard-kau-
einfuehrung-in-sass/ (DE)
19. FAQ
Wie lautet die
Zauberformel für Erfolg
aus 3 Buchstaben?
T U N
Möge dieser Lightning-Talk
zu SASS / SCSS Experimenten anregen!
Friedhelm Oja, WordCamp Berlin 2015