Mediendepot Ruhr

Professionelles Webdesign

Webdesign in Duisburg und Umgebung seit 2005

Mich findet Ihr jetzt bei http://www.anatom5.de!

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.

Wenn jemand noch einen schönen Link hat, nehm ich den gerne in der Liste auf (einfach an mich schicken)!

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

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
...

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.