SASS direkt in Contao ohne Ruby oder Compass.app nutzen.

[der_On]

Hallo,

heute habe ich eine kleine und hoffentlich nützliche Extension gebastelt, mit der man SASS (http://sass-lang.com/) Dateien automatisch zu CSS Dateien kompilieren kann ohne Ruby oder Compass.app zu nutzen. Dies ist möglich durch die tolle Bibliothek PHPSass (http://www.phpsass.com/).

Die Extension ist Open Source und kann hier runtergeladen werden: https://github.com/der-On/Contao-PHPSass

[Nina]

Pack sie doch bitte auch in die Erweiterungsverwaltung

[der_On]

Pack sie doch bitte auch in die Erweiterungsverwaltung

Ist erledigt. Hoffe ich habe alles richtig gemacht, da ich zum ersten mal eine meiner Extensions in die Erweiterungsverwaltung gestellt habe.

[michelb]

Erstmal vielen Dank, dass du dir die Mühe gemacht hast, die Extension anzufertigen.

Wieso ist die denn nur für 2.11.10 freigegeben, welche es noch gar nicht gibt?

Hab sie dann mal mit der 2.11.9 probiert und ab Installation wird überhaupt keine Ausgabe im Frontend erzeugt.

Debug-Info:

    [18] => Array
        (
            [0] => SELECT * FROM tl_phpsass WHERE disable != "1"
            [1] => 0 rows returned
            [2] => Array
                (
                    [id] => 1
                    [select_type] => SIMPLE
                    [table] => 
                    [type] => 
                    [possible_keys] => 
                    [key] => 
                    [key_len] => 
                    [ref] => 
                    [rows] => 
                    [Extra] => Impossible WHERE noticed after reading const tables
                )

        )

’ne Ahnung woran es liegt? Ist das womöglich der Grund weshalb sie nur für 2.11.10 freigegeben ist?

[filex99]

Hallo der_On,

auch von mir vielen Dank für das Erstellen der Extension.
Ich habe die Extension für contao 3.0.x angepasst, erhalte aber auch nur eine leere Seite .
Die css wird aber korrekt erstellt und liegt im Zielverzeichnis.
Irgendeine Idee?

Zur Info: Meine Anpassung für contao 3 beschränken sich auf das neue Dateisystem in der Datei PHPSass.php ab Zeile 21, ansonsten läuft das Script:

                    foreach($folders as $folder) {
                        
                        $css_dir  = TL_ROOT . '/' . \FilesModel::findByPk($folder['css_dir'])->path;
                        $sass_dir = TL_ROOT . '/' . \FilesModel::findByPk($folder['sass_dir'])->path;
                        $extensions_dir = (!empty($folder['extensions_dir']))?TL_ROOT . '/' . \FilesModel::findByPk($folder['extensions_dir'])->path:NULL;
                        $images_dir = (!empty($folder['images_dir']))?TL_ROOT . '/' . \FilesModel::findByPk($folder['images_dir'])->path:NULL;
                        $javascripts_dir = (!empty($folder['javascripts_dir']))?TL_ROOT . '/' . \FilesModel::findByPk($folder['javascripts_dir'])->path:NULL;
                        $output_style = $folder['output_style']; 

Vielen Dank für die Unterstützung!

[der_On]

Danke für die Tests. Ich werde es mir die kommenden Tage ansehen.

[der_On]

Ich habe den Fehler nun behoben. Es war ziemlich trivial. Habe auch die Contao version geändert.

[michelb]

Super, probier ich die Tage mal aus!

[mike_mcfly]

Ahoi,

danke für die Erweiterung.

Laut Deiner Anleitung soll man diese Schritte ausführen:

1. Within the contao backend under "Design" goto "PHPSass
2. Then create a new SASS folder
3. Give it a title and at least select the directory where your SASS files are located and where your CSS files should be created.
4. Be sure to not check the "disabled" option to activate the compilation.
5. Save and go to your frontend. The CSS files will get compiled on each page request.

Ich "finde" schon den ersten Schritt nicht, da es kein Design im BE gibt! Vermutlich verstehe ich da etwas falsch, kann mir jemand auf die Sprünge helfen?

---

contao: 3.0.6

[michelb]

Ich "finde" schon den ersten Schritt nicht, da es kein Design im BE gibt! Vermutlich verstehe ich da etwas falsch, kann mir jemand auf die Sprünge helfen?

Layout?

[der_On]

"Design" findest du (zumindest in Contao 2.x) in der linken Spalte sobald du im Backend eingeloggt bist.

Ahoi,

danke für die Erweiterung.

Laut Deiner Anleitung soll man diese Schritte ausführen:

1. Within the contao backend under "Design" goto "PHPSass
2. Then create a new SASS folder
3. Give it a title and at least select the directory where your SASS files are located and where your CSS files should be created.
4. Be sure to not check the "disabled" option to activate the compilation.
5. Save and go to your frontend. The CSS files will get compiled on each page request.

Ich "finde" schon den ersten Schritt nicht, da es kein Design im BE gibt! Vermutlich verstehe ich da etwas falsch, kann mir jemand auf die Sprünge helfen?

---

contao: 3.0.6

[mike_mcfly]

Danke für die gut gemeinten Antworten.

Ich habe es jetzt mal mit einer anderen Installation (Contao 2.11.10) versucht. Auch dort kann ich kein "Design" in der linken Spalte finden – siehe Screenshot anbei!???

Bildschirmfoto 2013-04-15 um 10.45.46.png

[der_On]

Okay. Es muss heissen "Layout". Sorry.

[mike_mcfly]

Okay. Es muss heissen "Layout". Sorry.

Verstehe. Also dann wäre der nächste Menueintrag, den ich laut Deiner Anleitung sehen sollte PHPSass, richtig?
Wo finde ich diesen? In Layout ist der nämlich nicht.

[der_On]

Okay, ich habe bei der Freigabe der Version einen Fehler gemacht (ist aber auch kompiliziert). Bitte aktualisiere auf die alpha3, dann sollte es laufen.

[mike_mcfly]

Okay, ich habe bei der Freigabe der Version einen Fehler gemacht (ist aber auch kompiliziert). Bitte aktualisiere auf die alpha3, dann sollte es laufen.

Now we talking business!

Eine Kleinigkeit noch: es fehlt ein Icon.

[planepix]

... dann update ich da auch mal, ich sah vor lauter Design die Knöpfe nicht

[der_On]

Now we talking business!

Eine Kleinigkeit noch: es fehlt ein Icon.

Die 0.1.1-alpha3 enthällt nun auch das Icon.

[ph!L]

Hallo zusammen,

in Contao 3.4.0 wirft die Extension leider nur eine Fehlermeldung im Frontend, die auch die komplette weitere Ausgabe unterdrückt.
Wäre hier vielleicht eine Anpassung auf 3.4. möglich? Die Extension ist m.M.n. ziemlich alternativlos für die Entwicklung mit SASS auf einem entfernten System.

Besten Dank!

[der_On]

Ich verwende/entwickle die Extension mittlerweile nicht mehr, da PHP Sass (zumindest damals) einige für mich kritische Fehler hatte.

Eine Anpassung auf Contao 3.x sollte denke ich aber nicht so schwierig werden. Hauptsächlich müsste vermutlich ein autoload.php erstellt werden.

Wer sich also daran probieren möchte und auch das darin verwendete PHP Sass aktualisieren will, kann mir gern einen Pull-Request senden. https://github.com/der-On/Contao-PHPSass

[MacKP]

Macht die Erweiterung denn mehr als Contao schon macht? Inzwischen kann man doch sass bzw. scss Dateien nutzen und von Contao compilieren lassen.

Viele Grüße

[Spooky]

Contao kommt mit leafo/scssphp (und leafo/scssphp-compass), SASS wird da nicht unterstützt.

[MacKP]

Contao kommt mit leafo/scssphp (und leafo/scssphp-compass), SASS wird da nicht unterstützt.

Ah, kk. Danke für die Info. Hab nie SASS geschrieben, deswegen auch nie Ausprobiert ^^

Viele Grüße

[Schneetiger]

Hi Community,

versuche aktuell, mich mit Contao und SASS zu beschäftigen. SASS habe ich aber noch nie ausprobiert. Wenn ich dies nun unter Contao anwenden möchte, wie muss ich da vorgehen? Habe aktuell keinen blassen Schimmer, da bisher "nur" mit CSS innerhalb Contao gearbeitet.
Freue mich auf Eure Antworten.

Viele Grüße
Schneetiger

[Spooky]

SASS wird nicht unterstützt. SCSS wird unterstützt. Einfach nur die SCSS Datei(en) im Seitenlayout auswählen.

[Webbaumeister]

versuche aktuell, mich mit Contao und SASS zu beschäftigen. SASS habe ich aber noch nie ausprobiert. Wenn ich dies nun unter Contao anwenden möchte, wie muss ich da vorgehen? Habe aktuell keinen blassen Schimmer, da bisher "nur" mit CSS innerhalb Contao gearbeitet.
Freue mich auf Eure Antworten.

Du kannst im Seitenlayout CSS-Dateien verlinken. Genauso kannst du dort SCSS-Dateien einbinden. Diese werden automatisch als CSS zum Browser geschickt.

Also:
- Datei mit Endung .scss erstellen
- Diese Datei im Layout verlinken
- ersten Sass-Code schreiben

[Andreas]

Falls die von Contao erstellten CSS-Dateien nicht sofort aktualisiert werden, dann habe ich ein Script programmiert, welches während der Entwicklung die CSS-Dateien in assets/css/ löscht, die älter sind als die neueste SCSS-Datei. Kannst mich fragen.

[Schneetiger]

Hallo Spooky, Webbaumeister und Andreas,

vielen, vielen Dank für Eure Antworten und Hilfe. Tut mir leid, jetzt erst zu antworten, war aber mit einem anderen Projekt unterwegs (nicht Contao).
Prima, ich werde mich da jetzt mal rantasten; kann ja nicht so schwierig sein. Wahrscheinlich habe ich komplizierter gedacht als nötig ;-)

@ Andreas: Deine Extension werde ich mir auch mal ansehen und vielen Dank für diese Unterstützung.

Servus,
Schneetiger

[Andreas]

Das ist keine Erweiterung, habe nur ein Script, welches in die system/config/initconfig.php kommt.

/**
 * Delete CSS files in assets/css/ which are older than the newest SCSS file in files
 * @author Andreas Burg <http://andreasburg.de/>
 */
if(TL_MODE == 'FE') // check only in FE
{
  // Only if a BE user is logged in
  if(sha1(session_id().(!Config::get('disableIpCheck') ? Environment::get('ip') : '').'BE_USER_AUTH') == Input::cookie('BE_USER_AUTH'))
  {
    $subFolder = '/contaodemo/theme/scss'; // A subfolder of files/ - e.g. /contaodemo/theme/scss

    // Calculate the newest SCSS file time
    $iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator(TL_ROOT.'/files'.$subFolder));
    foreach($iterator as $objFile)
    {
      if($objFile->getExtension() == 'scss')
      {
        #dump($objFile->getPathName());
        $lastChange = max($lastChange, $objFile->getCTime());
        #dump($objFile, date('d.m.Y H:i', $lastChange));
      }
    }

    // Delete older CSS files in assets/css/
    foreach(glob('assets/css/*.css') as $file)
    {
      #dump($file, date('d.m.Y H:i', filectime($file)));
      if(filectime($file) < $lastChange)
      {
        unlink($file);
      }
    }
  }
} 

Ich benutze keine SCSS, deswegen weiß ich nicht genau, wie gut das funktioniert, kannst du ja mal testen und berichten.