RSS Facebook Google+ Twitter

Joomla-Bugs

Neuigkeiten: Aktuelle Joomla!-Version: 3.9.0
Willkommen Gast. Bitte einloggen oder registrieren.

Autor Thema: LESS und CSS  (Gelesen 8511 mal)

LESS und CSS
« am: 09.02.2013, 21:58:02 »
(funktioniert mit dem Konsolenbefehl "php build/generatecss.php" im Joomla!-Verzeichnis).

und wenn man keine Konsole hat?

Offline Harmageddon

  • Administrator
    • ZweiIconKram
Re: LESS und CSS
« Antwort #1 am: 10.02.2013, 12:19:12 »
Dann braucht man vermutlich einen extra LESS-Kompiler. Du kannst höchstens versuchen, eine (per htaccess geschützte) PHP-Datei mit dem Inhalt
Code: (php) [Auswählen]
<?php
$path 
'build/generatecss.php'//entsprechend abändern
exec('php '.$path);
zu erstellen und im Browser aufzurufen. Das funktioniert aber aus Sicherheitsgründen nicht bei allen Hostern/Serverkonfigurationen.

Re: LESS und CSS
« Antwort #2 am: 10.02.2013, 13:46:28 »
Danke dir :)

LESS-Dateien kompilieren - unabhängig von Joomla - ist kein Problem. Hier existiert auch die Möglichkeit per JS. Aber der Zusammenhang -> LESS Joomla --> GIT --> Patch entschließt sich mir völlig.

Bzw. steht ich gerade auf dem Schlauch, was du überhaupt mit Konsole meinst  ;D

Offline Harmageddon

  • Administrator
    • ZweiIconKram
Re: LESS und CSS
« Antwort #3 am: 10.02.2013, 19:06:24 »
Konsole = Unix-, Windows- oder sonstige Konsole auf dem Server, mit der man auch so Zeugs wie "git pull origin" und sonstige git-Befehle ausführt. Die Alternative wäre ein anderer Kompiler, der die template.css aus der template.less generiert - und zwar nicht zur Laufzeit, wie das wahrscheinlich mit Javascript ist, sondern als richtige Datei.

Der Zusammenhang ist folgender:
zero24s Patch - und auch meine ersten Template-Patches - beinhaltet:
  • manuelle Änderung in der template.css
Die richtige Vorgehensweise wäre:
  • manuelle Änderung in der LESS-Datei (hier: template.less)
  • Kompilieren der CSS-Dateien
  • -> template.css wird durch den Kompiler neu generiert (bin mir nicht sicher, ob das auch bei JS der Fall ist)
  • -> wir haben (mindestens) zwei geänderte Dateien - template.less und template.css
  • Beide werden im Patch eingebaut.

Das Problem an der ersten Vorgehensweise (ohne LESS) ist folgendes:
Nachdem der Patch eingespielt / commited wurde, tritt irgendwann mal wieder ein neues CSS-Problem auf. Dieses wird mit Vorgehensweise 2 behoben, hierbei wird beim Kompilieren automatisch die template.css mit dem Ergebnis der template.less ersetzt. Die Änderung aus dem nur-CSS-Patch geht hierbei also wieder verloren.

Re: LESS und CSS
« Antwort #4 am: 10.02.2013, 19:49:58 »
Ja, soweit war mir das klar, nur das Kompilieren halt -_-, ohne Konsole.
Ich versuche es mal mit deiner Datei, ist ja eh lokal, daher hat man den Server quasi in der Hand und dessen Settings.

Hab aber immer noch kein Tortoise etc. am Laufen :D

Irgendwie stehe ich auf dem Schlauch. Normalerweise kompiliert man mit LESS (auch mit JS) ebenfalls die CSS Dateien, dafür ist es ja da. Sollte eigentlich auch ohne Konsole oder Datei zu schaffen sein. Bislang halt alles Theorie. Werden wir sehen.

Oder werden beim Joomla-LESS-Kompilieren mehrere Dateien (auch *.php) geändert?
« Letzte Änderung: 10.02.2013, 19:54:27 von La Geek »

Offline Harmageddon

  • Administrator
    • ZweiIconKram
Re: LESS und CSS
« Antwort #5 am: 10.02.2013, 20:15:43 »
Soweit ich weiß, generiert Javascript clientseitig (d.h. im Browser) bei jedem Seitenaufruf aus der less-Datei den CSS-Quelltext, ohne dabei eine template.css anzulegen. Bei der serverseitigen Kompilierung, sei es jetzt mit PHP, per Konsole oder sonstwas, wird eine template.css generiert, die dann im Browser verwendet wird. Nach jeder Änderung in der less-Datei muss daher die css-Datei neu generiert werden.

Wie gesagt: Ich bin mir nicht sicher, vermute aber, dass die JS-Methode immer zur Laufzeit generiert und keine eigene Datei kompiliert. Wenn du eine Methode hast, wo du aus einer .less-Datei eine tatsächlich existierende und auch per FTP oder sonstiges aufrufbare .css-Datei erhältst, geht das natürlich genauso wie die Methode über die Konsole.

Offline zero24

  • Global Moderator
    • Joomla! als Hobby
Re: LESS und CSS
« Antwort #6 am: 10.02.2013, 20:25:25 »
Ich habe das einmal abgetrennt.
Das hat ja nichts mehr mit dem Tracker Eintrag bzw. dem Bug zutun sonden ist Allgemein gültig.  :D

EDIT:
Ausgangsthread (Bug) ist dieser:

http://www.joomla-bugs.de/forum/index.php?topic=267.0
Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Denn jedermann ist überzeugt, daß er genug davon habe. (Rene Descartes, fr. Mathematiker u. Philosoph, 1596 - 1650)

Re: LESS und CSS
« Antwort #7 am: 11.02.2013, 15:17:27 »
Vorhin hatte ich die Muße, mir das genauer anzusehen. Jetzt weiß ich wieder, wo ich die Schwierigkeiten gesehen hatte. Template.less importiert etliche andere *.less Dateien

Code: (CSS) [Auswählen]
// CSS Reset
@import "../../../../media/jui/less/reset.less";

// Core variables and mixins
@import "variables.less"; // Custom for this template
@import "../../../../media/jui/less/mixins.less";

// Grid system and page structure
@import "../../../../media/jui/less/scaffolding.less";
@import "../../../../media/jui/less/grid.less";
@import "../../../../media/jui/less/layouts.less";

// Base CSS
@import "../../../../media/jui/less/type.less";
@import "../../../../media/jui/less/code.less";
@import "../../../../media/jui/less/forms.less";
@import "../../../../media/jui/less/tables.less";

// Components: common
// @import "../../../../media/jui/less/sprites.less";
@import "../../../../media/jui/less/dropdowns.less";
@import "../../../../media/jui/less/wells.less";
@import "../../../../media/jui/less/component-animations.less";
@import "../../../../media/jui/less/close.less";

// Components: Buttons & Alerts
@import "../../../../media/jui/less/buttons.less";
@import "../../../../media/jui/less/button-groups.less";
@import "../../../../media/jui/less/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less

// Components: Nav
@import "../../../../media/jui/less/navs.less";
@import "../../../../media/jui/less/navbar.less";
@import "../../../../media/jui/less/breadcrumbs.less";
@import "../../../../media/jui/less/pagination.less";
@import "../../../../media/jui/less/pager.less";

// Components: Popovers
@import "../../../../media/jui/less/modals.less";
@import "../../../../media/jui/less/tooltip.less";
@import "../../../../media/jui/less/popovers.less";

// Components: Misc
@import "../../../../media/jui/less/thumbnails.less";
@import "../../../../media/jui/less/labels-badges.less";
@import "../../../../media/jui/less/progress-bars.less";
@import "../../../../media/jui/less/accordion.less";
@import "../../../../media/jui/less/carousel.less";
@import "../../../../media/jui/less/hero-unit.less";

Wenn ich nun eine Änderung in einer dieser importierten .less vornehme
welche *.less muss ich kompilieren?

Ich hoffe, ich habe mich verständlich ausgedrückt. Einige *.less Dateien sind für die Front- andere für die Backend-Templates und wieder andere für beides zuständig.

Offline Harmageddon

  • Administrator
    • ZweiIconKram
Re: LESS und CSS
« Antwort #8 am: 11.02.2013, 17:06:28 »
Wenn ich nun eine Änderung in einer dieser importierten .less vornehme
welche *.less muss ich kompilieren?
Grundsätzlich jede, die die geänderte Datei einbindet. In der build/generatecss.php sind die Dateien aufgelistet, die von dieser kompiliert werden:
Code: (php) [Auswählen]
$templates = array(
            JPATH_ADMINISTRATOR . '/templates/isis/less/template.less' => JPATH_ADMINISTRATOR . '/templates/isis/css/template.css',
            JPATH_ADMINISTRATOR . '/templates/hathor/less/template.less' => JPATH_ADMINISTRATOR . '/templates/hathor/css/template.css',
            JPATH_ADMINISTRATOR . '/templates/hathor/less/colour_blue.less' => JPATH_ADMINISTRATOR . '/templates/hathor/css/colour_blue.css',
            JPATH_ADMINISTRATOR . '/templates/hathor/less/colour_brown.less' => JPATH_ADMINISTRATOR . '/templates/hathor/css/colour_brown.css',
            JPATH_ADMINISTRATOR . '/templates/hathor/less/colour_standard.less' => JPATH_ADMINISTRATOR . '/templates/hathor/css/colour_standard.css',
            JPATH_SITE . '/templates/protostar/less/template.less' => JPATH_SITE . '/templates/protostar/css/template.css',
            // Below files are to recompile the default Bootstrap CSS files
            __DIR__ . '/less/bootstrap-extended.less' => JPATH_SITE . '/media/jui/css/bootstrap-extended.css',
            __DIR__ . '/less/bootstrap-rtl.less' => JPATH_SITE . '/media/jui/css/bootstrap-rtl.css'
        );
Die alle neu kompilieren, damit sollte alles abgedeckt werden.

Edit: Kann man beim code-BBCode ([ code ]... [ /code ]) auch die Zeilennummern angeben?

Re: LESS und CSS
« Antwort #9 am: 11.02.2013, 17:43:31 »
Danke dir. War auch mein Gedanke, mir die PHP Datei anzusehen. Ich arbeite fast nur noch mit Wordpress, und habe mich überhaupt noch nicht mit der Bootstrap-Geschichte, die in Joomla! eingebunden ist, befasst. Bootstrap, klar ja, aber zusammen mit Joomla! nein.

Aber so langsam löst sich der Konten in meinem Hirn  ;D . Ist immer blöd, wenn man (so wie ich hier) rein theoretisch darüber nachdenkt. Anstatt sich ALLES dazugehörige mal praktisch anzusehen. Dennoch denke ich - ohne es in der Zwischenzeit praktisch nachvollzogen zu haben - den Weg ohne Konsole nun zu kennen.

Es gibt diverse JS-Scripts, mit denen sich aus der LESS eine CSS kompilieren lässt. Den Pfad zur CSS kann man dabei auch direkt eingeben und die alte CSS-Datei wird mit der neuen überschrieben.

Und so wie du sagtest, muss die entsprechende LESS-Datei (oder Dateien) geändert PLUS im nächsten Schritt die CSS kompiliert werden. Zum Schluss noch die LESS aus dem angesprochenen Template (also die Datei mit den ganzen less imports). Die LESS-Dateien speichert man innerhalb seines Branches, die CSS Dateien werden bei der Kompilierung überschrieben. Aus den hieraus entstandenen Veränderungen erstellt man zum Schluss den Patch.

Alles ohne Konsole :)

Zur Nummerierung de BBCodes: Default leider nicht, so wie ich das überblicke. Und den Core des Plugins hacken - lohnt der Aufwand?

Offline Harmageddon

  • Administrator
    • ZweiIconKram
Re: LESS und CSS
« Antwort #10 am: 11.02.2013, 17:52:32 »
Es gibt diverse JS-Scripts, mit denen sich aus der LESS eine CSS kompilieren lässt. Den Pfad zur CSS kann man dabei auch direkt eingeben und die alte CSS-Datei wird mit der neuen überschrieben.
Dann hab ich auch wieder was gelernt. Danke dafür!  ;)
Und so wie du sagtest, muss die entsprechende LESS-Datei (oder Dateien) geändert PLUS im nächsten Schritt die CSS kompiliert werden. Zum Schluss noch die LESS aus dem angesprochenen Template (also die Datei mit den ganzen less imports). Die LESS-Dateien speichert man innerhalb seines Branches, die CSS Dateien werden bei der Kompilierung überschrieben. Aus den hieraus entstandenen Veränderungen erstellt man zum Schluss den Patch.
Schöne Zusammenfassung.
Zur Nummerierung de BBCodes: Default leider nicht, so wie ich das überblicke. Und den Core des Plugins hacken - lohnt der Aufwand?
Ach was, so wichtig ist es dann auch wieder nicht.

 

BloQcs design by Bloc
| SMF © 2011, Simple Machines
Joomla-Bugs.de is not affiliated with or endorsed by The Joomla! Project™. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.