SASS ist ein Preprocessor für CSS, und die dazu passende Skriptsprache, um aus den .sass bzw .scss (wir verwenden in den ganzen Beispielen .scss) Dateien „normale“ CSS-Dateien zu erzeugen.
Compass ist ein Framework bzw. Komponenten-Bibliothek zu SASS. Es enthält jede Menge vorgefertigte Bausteine (Mixins usw), die man dann nicht mehr selber bauen muß. Da diese Bausteine sehr einfach zu erstellen und zu verwenden sind, kann man es vielleicht mit den Bundles für Textmate vergleichen. Da Compass auf SASS aufbaut, installiert es SASS gleich mit. Also brauchen wir nur Compass zu installieren und haben beides.
Die Vorteile von SCSS
Sass bzw. SCSS ist ein sogenannter Precompiler. Die mit dem SCSS Syntax verfassten Dateien werden als .scss-Datei gespeichert und im Nachhinein in eine normale .css-Datei übersetzt.
SCSS stellt uns eine ganze Reihe an nützlichen Features zur Verfügung, wie z.B. die Benutzung von Variablen, Selector-Nesting, das Vererben von CSS-Klassen, Mixins und Funktionen.
Installation von Sass
Wir müssen zunächst Ruby installieren, da Compass in Ruby geschrieben ist. Es gibt auch PHP-Pakete, die aber Ports sind, und in der Funktionalität immer etwas hinterherhängen, da die Entwicklung im Hauptprojekt stattfindet. Wir müssen nicht auf einem Remote Server .scss Dateien kompilieren, und [bra_highlight style=’highlight2′]brauchen uns nicht mit einem auf dem Server eventuell nicht vorhandenen Ruby auseinanderzusetzen[/bra_highlight].
Unter Windows benötigt ihr zunächst Ruby, welches am einfachsten mit dem RubyInstaller installiert werden kann. Aktuelle Mac OS Versionen haben ruby bereits vorinstalliert.
Sie wechseln in der Konsole (Terminal auf dem Mac, CMD auf Windows) in das bin Verzeichnis von Ruby auf Ihrem System
cd C:\Ruby200 x64\bin\
Geben Sie nun den Befehl ein, um Sass zu installieren:
gem install sass
und für Compass
gem install compass
MyOOS Webdesign mit Sass und Compass
Sass ermöglicht beim Webdesign die CSS (Cascading Style Sheets) Anweisungen logisch, wiederverwendbar und fehlerfrei zu entwickeln, so wie man es von Programmiersprachen gewohnt ist.
Framework installation
Um Ihr MyOOS Projekt mit der Compass zu erstellen, benötigen Sie das [bra_highlight style=’highlight2′]zurb-foundation[/bra_highlight] Erweiterung. Mit folgenden Befehl installieren Sie sich das Framework und alle notwendigen Abhängigkeiten. :
gem install zurb-foundation
Aktualisieren Sie Gem
gem update zurb-foundation
Erstellen Sie Ihr erstes MyOOS Projekt
Compass macht es wirklich einfach, ein neues Projekt zu starten. Da Sie das Framework jetzt installiert haben, haben Sie jetzt Compass, Sass und einige andere notwendige Abhängigkeiten auf Knopfdruck verfügbar.
befolgen Sie nachstehende Schritte, um loszulegen:
cd path / to / wo-you-want-your-Projekt
compass create foundation -r zurb-foundation --using foundation
Das config-file erzeugen
Die schlankeste Methode, um Compass zu benutzen, ist das Erzeugen einer config.rb-Datei. Diese teilt Compass ein paar einfache Parameter mit, so daß es weiß, woher es die .scss-Dateien holen soll und wo es die .css-Dateien hinpacken soll. Es gibt noch einige Optionen mehr, die wir hier jedoch nicht im Detail beleuchten.
Wir gehen mit der Konsole in das Root-Verzeichnis unseres Themes. Nun führen wir folgendes aus:
compass compile
Der Befehl erzeugt einen Ordner /config, und darin befindet sich die Datei compass.rb. .rb ist die Dateiendung für Ruby-Code-Dateien. Wir benennen compass.rb um in config.rb, damit sie als Konfigurationsdatei erkannt wird.
Die Datei sieht nach dem Erzeugen so aus (abgesehen von Kommentaren):
# Require any additional compass plugins here.
require 'zurb-foundation'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# 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
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
Sie können die Pfade und Ordnernamen beliebig anpassen, sie müssen nur den tatsächlichen Gegebenheiten entsprechen.
.scss-Dateien kommen in einen Unterordner /sass, damit sie entsprechend dem oben angegebenen Pfad gefunden werden.
Fertig.
Dem MyOOS Projekt legen wir eine config.rb Datei bei. Diese Liegt in dem Verzeichnis ~/blog/wordpress/wp-content/themes/myoos/foundation/
cd path / to / /blog/wordpress/wp-content/themes/myoos/foundation/
Nun können Sie
compass compile
ausführen, wenn Sie aus unseren .scss-Dateien die passenden .css erzeugen wollen.
Entwicklung mit Sass/Compass
Die Verwendung von Sass und Compass ist erst sinnvoll mit einem
Deployment welches über die Entwicklungsumgebung auf den Live Server staged.
Auf dem Live Server CSS Dateien anpassen würde das ganze Konzept von Sass ja unbrauchbar machen.