SassC im Mobile First Projekt nutzen

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:

  1. sassc
    Auf libsass basierter Sass-Interpreter, welcher in erster Linie empfohlen wird (Performancegründe) und auf dem Webserver installiert sein muß (siehe unten)
  2. sass
    Sass-Interpreter, welcher auf Ruby basiert
  3. 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

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

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

Wikipedia-Artikel: Sass (Stylesheet-Sprache)
sass-lang.com - Sass: Syntactically Awesome Style Sheets
FAQs are only visible for Weblication ai search and editors!
Was ist SassC und warum wird es im Mobile First Projekt verwendet?
SassC ist ein auf libsass basierender Sass-Interpreter. Er wird als schnelle und performante Möglichkeit empfohlen, damit Sass-Stylesheets zu CSS generiert werden können. Das Projekt basiert auf Sass, wodurch das Generieren von CSS wesentlich erleichtert wird.
Welche Möglichkeiten zur Nutzung von Sass gibt es in Weblication®?
Es gibt drei Optionen: 1) sassc: empfohlener Interpreter (auf libsass basierend, für Performancegründe; muss auf dem Webserver installiert sein) 2) sass: Ruby-basierter Interpreter 3) wCss2: alternativer, eigenentwickelter Sass-Interpreter, der alle von uns ausgelieferten Sass-Funktionen unterstützt; wird genutzt, wenn z. B. sassc eingestellt, aber nicht installiert ist.
Wann sollte der Ruby-basierte Sass-Interpreter statt SassC genutzt werden?
Der Ruby-basierte Sass-Interpreter kommt als zweite Option in Betracht. SassC (sassc) wird jedoch primär empfohlen, wenn es verfügbar und auf dem Webserver installiert ist, da es aus Performancegründen bevorzugt wird.
Wann wird der wCss2-Interpreter verwendet?
wCss2 wird verwendet, wenn beispielsweise sassc eingestellt ist, aber nicht installiert werden kann. Wichtig ist außerdem: Über die Entwicklerkonsole des Browsers lassen sich damit keine ursprünglichen Zeilennummern anzeigen.
Wie installiere ich SassC auf dem Webserver (Beispiel Domainfactory)?
Wenn SassC nicht standardmäßig verfügbar ist, muss es über den Provider installiert werden. Für Domainfactory (ManagedHosting-Tarife, Stand Feb 2017) wird beispielhaft empfohlen: 1) per SSH einloggen und in ein Installationsverzeichnis wechseln (ggf. mit mkdir anlegen) 2) via Git die Repos laden: sassc und libsass 3) in der Datei /sassc/Makefile ganz oben die Zeile setzen: export SASS_LIBSASS_PATH=<Pfad zu libsass> 4) im sassc-Verzeichnis make ausführen 5) optional einen Alias in der .bashrc setzen, damit sassc bequem über die Konsole aufrufbar ist (z. B. alias sassc="<pfad>/sassc/bin/sassc") 6) Hilfe mit sassc -h bzw. --help prüfen
Welche Rolle spielt das Makefile bei der SassC-Installation?
Im Makefile (/sassc/Makefile) muss der Pfad zu libsass über die Variable SASS_LIBSASS_PATH korrekt gesetzt werden. Dieser Pfad muss passend zur eigenen Serverroot angepasst werden, damit sassc korrekt mit libsass gebaut wird.
Wie aktiviere ich SassC in Weblication® manuell?
Ab Weblication® CMS Version 011.002.292.000 kann der Pfad manuell konfiguriert werden. Dazu wird im Konfigurationsbereich der Wert des path-Attributes innerhalb des <sassc>-Tags auf den passenden Installationspfad von SassC gesetzt.
Wo trage ich den SassC-Pfad in der Weblication-Konfiguration ein?
Im <sassc>-Tag innerhalb der Konfiguration (z. B. in der Datei default.wConf.php). Falls das Tag noch nicht existiert, soll es XML-konform ergänzt werden. Danach die Datei UTF-8 kodiert speichern.
Wie sieht ein Beispiel für das <sassc>-Tag in default.wConf.php aus?
Beispiel-Auszug: <wConf version="12"> ... <sass> <sassc path=""/> </sass> ... </wConf>
Welche Einstellungen muss ich bei der Nutzung von SassC in der design.css vornehmen?
Wenn SassC genutzt werden soll, muss die entsprechende Variable in der design.css auf sassc gesetzt werden: $cssInterpreter: sassc; Setzen Sie dies nur, wenn in der Statusbar bei Bearbeitung der design.css die Meldung „SassC ist verfügbar (Version: xxx)“ in grüner Schrift ausgegeben wird.
Woran erkenne ich, ob SassC verfügbar ist?
Bei Bearbeitung der design.css erscheint in der Statusbar die Meldung „SassC ist verfügbar (Version: xxx)“ in grüner Schrift. Nur dann sollten Sie $cssInterpreter auf sassc setzen.
Was mache ich, wenn es Probleme bei der SassC-Installation gibt?
Wenn es bei der Installation Probleme gibt, sollte direkt der Provider kontaktiert werden. Oft kann die Installation (zumindest kostenpflichtig) als Dienstleistung beauftragt werden.