SassC im Mobile First Projekt nutzen

Navigation

Veröffentlichungsdatum: 06. Februar 2017
Änderungsdatum: 05. Mai 2017

weblication cms css scss sassc wconf mobile first

Einsatz von SassC im Weblication® CMS Mobile First Projekt.

Das Mobile First Projekt basiert auf Sass. Sass ist eine Stylesheet-Sprache, welche als Präprozessor das Generieren von CSS enorm erleichert.

Zur Nutzung von Sass stehen Ihnen drei Möglichkeiten zur Verfügung:

sassc
Auf libsass basierter Sass-Interpreter, welcher in erster Linie empfohlen wird (Performancegründe) und auf dem Webserver installiert sein muß (siehe unten)
sass
Sass-Interpreter, welcher auf Ruby basiert
wCss2
Alternativer, eigenentwickelter Sass-Interpreter, welcher alle von uns ausgelieferten Sass-Funktionen unterstützt. Dieser Interpreter wird genutzt, falls z.B. sassc eingestellt aber nicht installiert ist. Über die Entwicklerkonsole des Browsers lassen sich mit diesem Interpreter keine ursprünglichen Zeilennummern anzeigen.

Weiter Informationen zu Sass finden Sie im Internet (siehe z.B. weiterführende Informationen unten).

Um den schnelleren Sass-Interpreter SassC nutzen zu können, wollen wir Ihnen nachfolgend am Beispiel des Providers Domainfactory aufzeigen, wie Sie dies auf dem Webserver bereitstellen und für Weblication^® aktivieren.

SassC auf dem Webserver installieren
SassC für Weblication^® aktivieren

SassC auf dem Webserver installieren

Sofern SassC auf Ihrem Webserver nicht standardmässig verfügbar ist, klären Sie bitte über Ihren Provider, ob eine Installation möglich ist.

Beim Provider Domainfactory ist eine nachträgliche Installation beginnend mit den ManagedHosting Tarifen möglich (Stand: Februar 2017).

Anleitung zur SassC-Installation bei Domainfactory

Beispielhaft zeigen wir Ihnen auf, wie Sie sassc auf Servern bei Domainfactory (z.B. ManagedServer, ManagedHosting, ResellerDedicated) installieren und nutzen können. (ohne Gewährleistung)

Loggen Sie sich mit einem berechtigten SSH-Benutzer in die Konsole ein und wechseln Sie in ein gewünschtes Installationsverzeichnis (Pfade passend zu Ihrer Serverroot anpassen):
Beispiel:
cd /www/xxxxxx_xxxxx/ms_appl
Sofern der Ordner ms_appl noch nicht existiert, können Sie diesen mit dem Befehl "mkdir ms_appl" erstellen.
Laden Sie nun die erforderlichen Pakete via GIT herunter:
git clone https://github.com/sass/sassc.git
git clone https://github.com/sass/libsass.git
Öffnen Sie die Datei /sassc/Makefile (z.B. mit vi oder nano) und ergänzen Sie ganz oben folgende Zeile:
export SASS_LIBSASS_PATH=/www/xxxxxx_xxxxx/ms_appl/libsass
(Pfade passend zu Ihrer Serverroot anpassen)
Wechseln Sie in das Verzeichnis sassc und führen Sie den Befehl "make" aus.
cd sassc
make
Die Installation sollte nach wenigen Minuten abgeschlossen sein.
Es wird empfehlen, in die .bashrc einen Alias einzutragen, damit das Programm direkt über die Konsole angesprochen werden kann.
Wechseln Sie dazu in das Homedir.
cd $HOME
Nun öffnen Sie mit einem beliebigen Editor die Datei .bashrc und fügen folgende Zeile in die Datei ein:
alias sassc="/www/xxxxxx_xxxxx/ms_appl/sassc/bin/sassc"
(Pfade passend zu Ihrer Serverroot anpassen)
Sie können das Tool nun direkt mit sassc ansprechen.
Für die Programmhilfe nutzen Sie beispielsweise
sassc -h
(bzw. --help)

Sofern Sie Probleme mit der Installation haben, wenden Sie sich bitte direkt an Ihren Provider. In den meisten Fällen kann dies zumindest kostenpflichtig über den Provider als Dienstleistung in Auftrag gegeben werden.

SassC für Weblication^® aktivieren

Ab Weblication^® CMS Version 011.002.292.000 können Sie für eine Nutzung von SassC manuell den Pfad in der Konfiguration hinterlegen.

Setzen Sie hierzu den Wert des path-Attributes innerhalb des sassc-Tags (zu sass) auf den passenden Pfad der SassC-Installation auf Ihrem Webserver.

Sofern das Tag in der default.wConf.php noch nicht vorhanden sein sollte, setzen Sie dies XML-Konform.
Speichern Sie die Konfigurationsdatei UTF-8 kodiert ab.

Beispiel: Auszug aus der /weblication/grid5/conf/default.wConf.php zur Umwandlung in Kleinschreibweise

<wConf version="12">
  ...
  <sass>
    <sassc path=""/>
  </sass>
  ...
</wConf>

Sofern noch nicht erfolgt, setzen Sie bei Nutzung von Sassc in der design.css die entsprechende Variable auf den Wert sassc:

$cssInterpreter: sassc;

Sie sollten dies nur dann setzen, wenn in der Statusbar bei Bearbeitung der design.css in grüner Schrift die Meldung "SassC ist verfügbar (Version: xxx)" ausgegeben wird (xxx steht für die Versionsnummer von sassc).

Weiterführende Links

Wikipedia-Artikel: Sass (Stylesheet-Sprache)

sass-lang.com - Sass: Syntactically Awesome Style Sheets