was macht der Browser mit LESS-Code

[heinetz]

Hallo Forum,

ich werde in einem Bootstrap-Projekt mit LESS arbeiten müssen. Bootstrap und LESS sind neu für mich, ich hab mir beiden angesehen und beides erscheint mir nicht sonderlich kompliziert. Wie LESS grundsätzlich einzubinden ist und wie LESS-Code aussieht, ist klar. Was mich aber interessiert, ist was der Browser mit dem LESS-Code macht.

<link rel="stylesheet/less" type="text/css" href="less/style.less"/>  
<script src="js/less.js" type="text/javascript"></script>

Ich stelle mir vor, less.js ist ein Javascript (ach was), das den zuvor definierten LESS-Code in CSS umwandelt und in's document schreibt. Ist es jetzt so, dass der Browser die style.less ignoriert, weil er aufgrund des Attributes rel="stylesheet/less" nicht's mit dem link-Element anfangen kann? Und wie kann das less.js die Datei style.less lesen?

Und noch was:
Ich habe nach einem Bootstrap-Forum gesucht. Allerdings nur eines gefunden, in dem insgesamt vielleicht 20 Beiträge stehen. Natürlich weiss ich, wo ich die Doku finde, die auch recht gut zu sein scheint. Trotzdem finde ich es immer hilfreich, mich persönlich mit anderen Nutzern auseinanderzusetzen. Kennt jemand ein lebendiges Bootstrap-Forum? Kann ich meine Fragen speziell dieses Framework betreffend sonst auch hier stellen?

danke für tipps und

beste gruesse,
heinetz

[MudGuard]

Hi,

ich werde in einem Bootstrap-Projekt mit LESS arbeiten müssen. Bootstrap und LESS sind neu für mich, ich hab mir beiden angesehen und beides erscheint mir nicht sonderlich kompliziert. Wie LESS grundsätzlich einzubinden ist und wie LESS-Code aussieht, ist klar. Was mich aber interessiert, ist was der Browser mit dem LESS-Code macht.

Der Browser? Gar nichts. Less wird doch schon serverseitig zu CSS umgewandelt.
Oder versteh ich was falsch?

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Der Browser? Gar nichts. Less wird doch schon serverseitig zu CSS umgewandelt.
Oder versteh ich was falsch?

LESS bietet beides.

„Die Client-seitige Verwendung ist der einfachste Weg um loszulegen und gut für die Entwicklung. Für die Produktivumgebung, besonders wenn Performance wichtig ist, empfehlen wir LESS mit node oder einem der vielen third party Tools zu kompilieren.“ [lesscss.de]

Die deutschsprchige Seite ist gegenüber lesscss.org hoffnungslos veraltet. Version 1.3.3 zum Download – och nö, das will keiner. border-radius mit Präfixen – och nö, das braucht keiner.

Qapla'

[molily]

Hallo,

ich werde in einem Bootstrap-Projekt mit LESS arbeiten müssen.

Üblicherweise bindet man Bootstrap als kompiliertes CSS ein. Eine Nutzung von LESS ist nicht zwingend nötig (aber allgemein sinnvoll).

Was mich aber interessiert, ist was der Browser mit dem LESS-Code macht.

Üblicherweise gar nichts. Man sollte LESS auf dem Server bzw. der Entwicklermaschine in CSS kompilieren.

LESS ist ein JavaScript-Programm, dass unter Node oder im Browser laufen kann. Hier wird es im Browser ausgeführt.

<link rel="stylesheet/less" type="text/css" href="less/style.less"/>

<script src="js/less.js" type="text/javascript"></script>

> Ich stelle mir vor, less.js ist ein Javascript (ach was), das den zuvor definierten LESS-Code in CSS umwandelt und in's document schreibt.  
  
Ja, das ist, was in diesem Fall passiert.  
  

> Ist es jetzt so, dass der Browser die style.less ignoriert, weil er aufgrund des Attributes rel="stylesheet/less" nicht's mit dem link-Element anfangen kann?  
  
Ja.  
  

> Und wie kann das less.js die Datei style.less lesen?  
  
So wie JavaScript sämtliche Ressourcen lesen kann: Indem es sie per XMLHttpRequest lädt.  
  
Siehe <https://github.com/less/less.js/blob/master/lib/less/browser.js>  
  

> Kennt jemand ein lebendiges Bootstrap-Forum?  
  
Die Doku weist auf StackOverflow hin.  
<http://getbootstrap.com/getting-started/#community>  
  
Mathias

-- 
[Chaplin.js - JavaScript application architecture](http://chaplinjs.org/)

[heinetz]

> > Und wie kann das less.js die Datei style.less lesen?

So wie JavaScript sämtliche Ressourcen lesen kann: Indem es sie per XMLHttpRequest lädt.

Das habe ich eben schon beobachten können mit less.watch()

Mathias

Danke.

Ich habe eben das, glaube ich Wesentliche ausprobiert: Variablen und Mixins

Es macht den Eindruck, als könne es die Arbeit mit CSS erheblich erleichtern! Weil ich nun nur an einem Beispiel herumprobiere versuche ich mir vorzustellen, wie das dann produktiv aussieht.
Ich habe mir angewöhnt, das CSS direkt mit Firebug zu entwickeln, sprich die Selektoren direkt im Browser zu verändern und wenn alles passt, den Code aus Firebug herauszukopieren und dann in's Stylesheet zu Pasten. Wenn dann nach einem Reload alles aussieht, wie zuvor im Firebug angepasst, ist alles ok.

Die Vorgehensweise geht dann nicht mehr. Wobei ich mir vorstellen kann, dass less.watch() genau diese Vorgehensweise ersetzt.

gruss,
heinetz

[1UnitedPower]

Meine Herren!

Ich habe mir angewöhnt, das CSS direkt mit Firebug zu entwickeln, sprich die Selektoren direkt im Browser zu verändern und wenn alles passt, den Code aus Firebug herauszukopieren und dann in's Stylesheet zu Pasten.

Mit den Chrome Entwicklertools und dank Sourcemaps geht das. Ob Firebug eine ähnliche Unterstützung bietet, weiß ich nicht.

Mit Chrome kannst du die Änderungen sogar direkt lokal speichern, so kannst du dir den copy&paste Schritt sparen. Mit einem Taskrunner (z.B. Grunt oder Gulp) kannst du außerdem automatisiert* den Kompiliervorgang durchführen und schließlich mit einem Synchronisationsprogramm die Änderungen sofort hochladen. Dafür musst du zwar einmalig beim Setup recht viel Aufwand auf dich laden, aber danach ist das Arbeiten ein Genuss.

* Die Taskrunner müssen üblicherweise noch per Hand angestoßen werden, aber auch das lässt sich mit Dateisystem-Observer automatisieren.

Der erste Schritt wird von Remy Sharp hier beschrieben.

[Gunnar Bittersmann]

@@molily:

nuqneH

Üblicherweise bindet man Bootstrap als kompiliertes CSS ein. Eine Nutzung von LESS ist nicht zwingend nötig (aber allgemein sinnvoll).

Bootstrap gibt es mittlerweile auch mit Sass. Eine Nutzung von LESS ist nicht zwingend nötig – und vielleicht auch nicht sinnvoll.

Die Frage, ob Bootstrap überhaupt sinnvoll ist, lass ich mal im Raum stehen.

Qapla'