Crashkurs: Mit Sass & Compass durchstarten

Jedes RockSolid Theme enthält zusätzlich zu den CSS-Dateien auch die jeweils dazugehörigen Sass und SCSS Dateien. Design-Anpassungen können Sie direkt in den CSS-Dateien durchführen, wir empfehlen jedoch mit den Sass oder SCSS Dateien zu arbeiten. Dadurch können Sie die selben Effekte mit viel weniger Zeilen an Code realisieren, und müssen sich dabei keine Gedanken über Vendor-Prefixe oder ähnliches machen.

Wählen: Compass.app oder Command-Line?

Sie haben zwei Möglichkeiten Compass zu verwenden: über die Command-Line oder über ein Programm mit Benutzeroberfläche. Wir empfehlen die Verwendung der Command-Line, weil sie schnell und stabil läuft und selbst für weniger erfahrene Command-Line-Benutzer leicht zu bedienen ist. Netter Nebeneffekt: Die Command-Line-Variante ist kostenlos.

A: Compass für die Command-Line installieren

1. Schritt: Ruby installieren

Compass bzw. Sass benötigt Ruby, daher müssen Sie zuerst Ruby installieren. In OSX ist Ruby bereits enthalten, falls Sie also einen Mac verwenden können Sie diesen Schritt überspringen.

Für Windows kann Ruby mit dem RubyInstaller installiert werden. Gehen Sie dafür auf die Site http://rubyinstaller.org/ und laden Sie den Installer herunter. Starten Sie die Installation und achten Sie darauf dass Add Ruby executables to your PATH aktiviert ist und schließen Sie die Installation ab.

Öffnen Sie nun die Command-Line. In Windows trägt sie den Namen Eingabeaufforderung und ist unter Startmenü › Programme › Zubehör › Eingabeaufforderung zu finden. Geben Sie nun gem -v ein und drücken Sie Enter. Jetzt sollte Ihnen eine Versionsnummer angezeigt werden (z.B. 1.8.23). Nun können Sie mit dem nächsten Schritt fortfahren.

2. Schritt: Compass gem installieren

Windows

Öffnen Sie die Command-Line (Eingabeaufforderung), geben Sie folgende Zeile ein und betätigen danach die Enter-Taste:

gem install compass

OSX

Öffen Sie die Command-Line (Terminal), geben Sie folgende Zeile ein und betätigen danach die Enter-Taste

sudo gem install compass

Das wars schon! Damit ist die Installation von Sass und Compass abgeschlossen.

3. Schritt: Compass verwenden

Um .sass bzw. .scss Dateien in css zu verwandeln öffnen Sie die Command-Line und geben Sie folgende Zeile ein und betätigen danach die Enter-Taste:

compass watch PFAD/ZUM/ORDNER

PFAD/ZUM/ORDNER muss dabei durch den Pfad zum sass oder scss Ordner des Themes ausgetauscht werden. Jetzt werden die CSS-Dateien automatisch generiert sobald Sie eine SCSS- oder Sass-Datei ändern. Wenn Sie Ihre Änderungen abgeschlossen haben wechseln Sie zurück zur Command-Line, drücken Strg + C und beenden die Command-Line.

B: Compass.app installieren

1. Schritt: Compass.app herunterladen

Die compass.app kann auf Windows, OSX, oder Linux verwendet werden. Gehen Sie hierfür auf die Site http://compass.kkbox.com/ und laden Sie die compass.app herunter. Eine Installation ist nicht nötig, Sie können die compass.app nach dem herunterladen direkt öffnen.

2. Schritt: Compass verwenden

Um .sass bzw. .scss Dateien in css zu verwandeln starten Sie die compass.app, klicken auf das compass-Symbol im Infobereich der Startleiste und klicken dann auf Watch a Folder.... Wählen Sie den sass oder scss Ordner des Themes aus und klicken Sie auf OK. Jetzt werden die CSS-Dateien automatisch generiert sobald Sie eine SCSS- oder Sass-Datei ändern.

Info: Sass und Ihr Theme

In RockSolid Contao-Themes befinden sich die .sass bzw. .scss Dateien im Download-Paket im Ordner contao/theme/files/THEME/scss bzw. contao/theme/files/THEME/sass (THEME ist der Name Ihres Themes). Wenn das Theme mittels .cto-Datei installiert wurde befinden sich diese Ordner auch auf dem Webspace im Ordner /files/THEME/. In diesen Ordnern befindet sich jeweils eine config.rb-Datei, in der bereits alle Einstellung für Sie vorgenommen sind. Um die .sass bzw. .scss Dateien in CSS3 zu verwandeln genügt folgender Befehl in der Command-Line (in diesem Fall verwenden wir SCSS):

compass watch files/THEME/scss/

Danach werden Ihre Änderungen laufend und automatisch als CSS3 in den Ordner /files/THEME/css gespeichert.

Wahl: Was gefällt ihnen besser Sass oder SCSS?

Für die Verwendung von Sass gibt es zwei verschiedene Syntax-Varianten: Sass und SCSS. Beide Varianten bieten den selben Funktionsumfang und unterscheiden sich lediglich in der Schreibweise. Sie haben die freie Auswahl, denn alle RockSolid Themes werden mit Sass und SCSS Dateien ausgeliefert.

Sass

Bei Sass wird anstatt mit geschwungenen Klammern mit Einrückungen gearbeitet. Semikolons werden weggelassen.

Sass-Beispiel:

body
    color: #000
    +box-shadow(0 0 10px #000 inset)
    header
        color: #f00

SCSS

Die SCSS Syntax baut auf CSS auf. Das heißt jedes valide CSS kann direkt ohne Anpassungen in eine SCSS-Datei übernommen werden.

SCSS-Beispiel:

body {
    color: #000;
    @include box-shadow(0 0 10px #000 inset);
    header {
        color: #f00;
    }
}

Mehr: Variablen, Funktionen und Mixins

Farben

Die meisten Farben sind am Anfang der Sass-Datei in Variablen gespeichert, um diese zu ändern müssen Sie sie also nur an einer Stelle Änderungen durchführen.

Funktion col()

Alle RockSolid Themes bauen auf ein Gridsystem auf welches in der Desktop-Variante 25 gleichgroße Spalten hat. Mit der col() Funktion wird die Verwendung dieser Spalten vereinfacht.

Die Funktion verfügt über zwei Parameter:

1. Die gewünschte Spaltenbreite
2. Die Spaltenbreite des übergeordneten Elements

Beispiel

Um Element a 15 Spalten, Element b 10 Spalten und Element c und d 5 Spalten breit zu machen reicht folgendes scss:

/* Breite: 15 Spalten, Mutter-Element 25 Spalten */
#a { width: col(15,25) }
/* Breite: 10 Spalten, Mutter-Element 15 Spalten */
#b { width: col(10,15) }
/* Breite:  5 Spalten, Mutter-Element 10 Spalten */
#c { width: col(5, 10) }
/* Breite:  5 Spalten, Mutter-Element 15 Spalten */
#d { width: col(5, 15) }

/* Breite: 15 Spalten, Mutter-Element 25 Spalten */
#a { width: 60%; }
/* Breite: 10 Spalten, Mutter-Element 15 Spalten */
#b { width: 66.66667%; }
/* Breite:  5 Spalten, Mutter-Element 10 Spalten */
#c { width: 50%; }
/* Breite:  5 Spalten, Mutter-Element 15 Spalten */
#d { width: 33.33333%; }

#a, #b, #c, #d {
    min-height: 50px;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) inset;
}
#d {
    margin-top: 5px;
}

<div id="a">A
    <div id="b">B
        <div id="c">C</div>
    </div>
    <div id="d">D</div>
</div>