Sass

Sass einrichten

Um auf OSX Sass zu verwenden folgende Befehle ausführen:

gem install compass
gem install css_parser

Dann in das Verzeichniss wechseln (im Fall von NEOS):

cd NEOS/Packages/Sites/RSYS.DefaultSite/Resources/Private/Styles
compass watch

Dort liegt die Konfigurationsdatei config.rb

if RUBY_VERSION =~ /1.9/
    Encoding.default_external = Encoding::UTF_8
    Encoding.default_internal = Encoding::UTF_8
end
relative_assets = true
css_dir = "../../Public/Styles"
sass_dir = "."
images_dir = "Images"
images_path = "../Images"
output_style = :compact
environment = :production

Damit werden dann Änderungen in den *.scss Dateien direkt compiliert.

Dokumentation

Dokumentation zu Sass ist zu finden unter http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Erstellt: 03/2014| Geändert: 10/2015

Shared hosting

Hier ist es mir bisher nicht gelungen. Zunächst Ruby aktivieren, dann folgenden Befehl:

gem install compass --install-dir /html/gem

Die Installation klappt, aber beim Ausführen kommt der Fehler:

/html/bin/compass
/usr/local/ruby/lib/ruby/site_ruby/1.8/rubygems.rb:827:in `report_activate_error': Could not find RubyGem compass (>= 0) (Gem::LoadError)
from /usr/local/ruby/lib/ruby/site_ruby/1.8/rubygems.rb:261:in `activate'
from /usr/local/ruby/lib/ruby/site_ruby/1.8/rubygems.rb:68:in `gem'
from /html/bin/compass:18

Erstellt: 04/2014| Geändert: 10/2015

Firesass

Um in Firefox die Css Stile debuggen zu können (das ist eine coole Sache!) firesass installieren (https://addons.mozilla.org/de/firefox/addon/firesass-for-firebug) und den compass Befehl mit debug info aufrufen:

compass watch  --debug-info

 

Update: Das Addon gibt es leider nicht mehr: "Dieses Add-on wurde durch seinen Autor entfernt."

Erstellt: 03/2014| Geändert: 10/2015

Eclipse Bulder

Alternativ zum Starten des compass watch Befehls auf der Konsole, kann man auch Eclipse konfigurieren beim Speichern neu zu komilieren.

Dazu in den Preferences setzen von General/Workspace/Build automatically.

Dann ein build.xml File anlegen mit folgenden Inhalt:

<?xml version="1.0" encoding="UTF-8"?>
<project basedir="." default="">
  <!-- compile .scss files in the /Resources/Private/Styles/ directory using compass -->
  <target name="compass.compile">
    <exec executable="compass" dir="${basedir}/Resources/Private/Styles/">
      <arg value="compile" />
      <arg value="--debug-info" />          
    </exec>
    <eclipse.refreshLocal resource="xa/public" depth="infinite"/>
  </target>
</project>

Das --debug-info nur während der Entwicklung setzen (ggf. zweites Target definieren).

Dann:

  • Einen neuen Project Builder anlegen, Typ: Ant.
  • Das Buildfile build.xml auswählen
  • Das Target compass.compile wählen bei Auto Build
  • Unter Build Options/Specify Resources das Verzeichnis /Resources/Private/Styles wählen

Die Konfiguration (wie z.B. das Zielverzeichnis) werden aus der Konfiguration in config.rb gelesen in /Resources/Private/Styles.

Erstellt: 03/2014| Geändert: 10/2015