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: 03/2023

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

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

Auf dem Server kompilieren

Inzwischen nutze ich keine der Techniken ober mehr mit lokalem compilieren. Meine PHP Applikationen oder mein TYPO3 Template compilieren die scss Dateien selbst mit scssphp.

composer require scssphp/scssphp

Erstellt: 03/2023| Geändert: 03/2023