Sass/Scss und Compass als CSS preprocessor
Was ist das überhaupt? CSS benutzt man für das Aussehen von einer Internetseite. Das ist für die meisten schon
kompliziert genug zu schreiben. Jetzt gibt es Möglichkeiten das ganze noch zu vereinfachen, in dem man ein paar
Elemente aus der Programmierung nutzt und durch eine Übersetzung dann erst das eigentliche CSS erstellt. Klingt
für viele erst einmal noch komplizierter und sieht auch noch komisch aus.
Ich fand solche Preporzessoren
auch längere Zeit eher unnötig. Aber nachdem ich mich einmal etwas näher mit Sass und Compass beschäftigt hatte,
war mir schnell klar, das ich dadurch enorm viel Zeit sparen kann und wesendlich einfacher arbeiten kann.
Da es auf der Contao-Camp 2013 in München anscheinend einigen Leuten ähnlich ging, habe ich mal für mehr Infos eine kleine (unsortierte) Liste zusammengestellt an spannenden Informationen dazu.
Auf der Contao-Konferenz 2014 durfte ich zu dem Thema auch eine kleine Einführung geben. Da ich dafür nur eine Stunde Zeit hatte, habe ich nur die Grundlagen vorgestellt. Meine Folien zu dem Vortrag will ich euch natürlich nicht vorenthalten.
Die offiziellen Seiten von den Projekten
Linkliste
Grundlagen
- https://www.youtube.com/watch?v=Q24sfIYRHoE
- https://www.youtube.com/watch?v=fbVD32w1oTo
- http://css-tricks.com/sass-style-guide/
- http://maddesigns.de/compass-sass-1472.html
- http://webkrauts.de/artikel/2011/effiziente-css-entwicklung-mit-sass-und-compass-teil-2
- http://robots.thoughtbot.com/controlling-color-with-sass-color-functions
- https://speakerdeck.com/beausmith/less-tips-tricks-best-practices
- http://viget.com/extend/sass-maps-are-awesome
- http://sassmeister.com (von Martina Bieringer)
- http://sassme.arc90.com (von Hella Schuster)
- http://kikmedia.de/blog/workflow-mit-aptana-und-sass.html
Nützliches/Snippets
- http://css-tricks.com/forums/topic/lets-learn-sass-together-/
- http://css-tricks.com/media-queries-sass-3-2-and-codekit/
- http://fuelyourcoding.com/35-great-resources-for-compass-and-sass/
- http://brandonmathis.com/blog/2010/09/21/fast-color-theming-with-compass-and-sass/
- https://www.youtube.com/watch?v=x6qe_kVaBpg
- http://koala-app.com/
- http://jackiebalzer.com/color
- SASS mixin for a pure CSS3 Slideshow
- How to dynamically change text color based on a background color
- http://blog.mediaworx.com/css-sprites-mit-sass-und-compass/
- http://hugogiraudel.com/2014/02/24/star-rating-system-with-sass/
- http://alexwolfe.github.io/Buttons/
Beispiel config.rb Datei
Da es mich etwas Zeit gekostet hat die config.rb so anzupassen, das ich lokal und auf dem Server die passenden Pfade für die verschiedenen Dinge zu haben, hier ein kleiner Auszug dazu (vorerst unkommentiert):
Quelle: http://compass-style.org/help/documentation/configuration-reference/
...
# Set this to the root of your project when deployed:
http_path = "files/projekt-css/"
css_dir = "files/projekt-css/"
sass_dir = "sass"
images_dir = "files/projekt-css/img"
http_images_path ="../img"
sprite_load_path ="files/projekt-css/img"
fonts_dir = "files/projekt-css/schriften"
http_fonts_path = "../schriften"
javascripts_dir = "lib"
http_javascripts_path = "/files/projekt-css/lib"
encoding = "UTF-8"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
...
An sich benutze ich compass nicht mehr, da die ganzen Funktionen mitlerweile überflüssig geworden sind.
Scss-Dateien direkt in Contao einbinden
Für Contao gibt es eine einfache Möglichkeit die Dateien direkt einzubinden und dann durch Assetic die CSS-Dateien zu erzeugen (auch wenn Sass/Compass nicht direkt auf dem Server installiert ist).
Damit kann man die Scss-Dateien direkt auf dem Server bearbeiten und braucht sich um das Compilieren/Zusammenfügen/Komprimieren keine Gedanken mehr zu machen. Eine config.rb ist dabei auch nicht nötig. Diese wird automatisch erzeugt.
ab Contao 3.3
Mit Contao 3.3 geht es am einfachsten. Die SCSS-Dateien können einfach im Seitenlayout als zusätliche Dateien eingebunden werden. Compass-Dateien werden auch direkt mitgeliefert und können dann einfach per @import eingebunden werden.
SuperTheme
Kann man hier bekommen:
https://github.com/comolo/contao-supertheme
Funktioniert genau so, wie in Contao 3.3. Ist also eine einfache Möglichkeit das vor Contao 3.3 zu nutzen.
Theme Plus
Die Erweiterungen sind von bit3 und aktuell über github oder composer zu bekommen. Hier geht noch einiges mehr. Man kann Dateien je nach Device einbinden lassen oder auch JavaScript asynchron laden.
Wichtig ist nur, dass in der aktuellen Version die Pfade zu Schriften/Bildern/Sprite-Grafiken absolut vom Contao Root aus gesetzt werden müssen.