Joomla! Documentation™

De meeste van de standaard Joomla 3.0 template stylesheets zijn geschreven met behulp van LESS en vervolgens gecompileerd voor het genereren van de CSS bestanden.

Waar vind je de .less stylesheets en compiler?

De .less bouwstenen zijn te vinden in media/jiu/less/. De specifieke template .lessbestanden bevinden zich in templates/<template>/less/.

Het omvattende CSS generatie script, LESS compiler, en andere soortgelijke bouw hulpmiddelen kunt u vinden in de build/ map van de Joomla source op GitHub. Zie Git voor Programmeurs voor meer informatie over het gebruik van GitHub. De build map is alleen beschikbaar op de Joomla source, het is geen onderdeel van een officiële Joomla versie.

Hoe de CSS-stylesheets opnieuw te genereren

Voor het opnieuw genereren van alle CSS-bestanden van een Joomla core distributie, dient u de generatie scripts als een CLI-toepassing uit te voeren.

Bijvoorbeeld:

cd joomla-cms/build
c:\xampp\php\php.exe generatecss.php

Compileren van uw eigen LESS bestanden voor uw template

Voor het compileren van less bestanden voor uw eigen template, dient u een kopie van het generatecss.php script te maken en deze aan te passen voor uw template.

Als alternatief kunt u gebruik maken van een LESS Compiler plugin die uw .less bestanden automatisch compileert bij het opnieuw laden van de pagina: http://extensions.joomla.org/extensions/miscellaneous/development/22424

Meer alternatieven en tools vindt u in een artikel in een recent Joomla! Magazine: http://magazine.joomla.org/issues/issue-may-2013/item/1289-tools-to-do-less

Niet alle LESS compilers zijn gelijk

Vanwege stijl consistentie van de Joomla core code, wordt de LESS compiler, verkregen van leafo.net/lessphp, gebruikt.

Als u werkt aan uw eigen template kunt u gebruik maken van de compiler die u wilt.

Het verschil in CSS vs LESS imports

De belangrijkste .less file en vertrekpunt, in dit voorbeeld voor protostar, staat in

/templates/protostar/less/template.less

Als u dit bestand opent, vindt u veel @imports in dit bestand - import vanuit veel verschillende plaatsen. In tegenstelling tot de import in CSS, import in LESS wordt gecompileerd naar één enkel CSS bestand. Dit resulteert in minder http requests en verbetert de snelheid van uw website.

Van bestaande CSS naar LESS / importeren CSS-bestanden

Mogelijk wilt u uw bestaande CSS bestanden en classes toevoegen aan uw LESS aangedreven template of begin met wat u al heeft. Als alle CSS declaraties compatibel zijn met LESS kunt u uw .css bestanden hernoemen naar .less en daarna compileren en gebruiken. Vervolgens kunt u stap voor stap gebruik maken van de geweldige dynamische functies die LESS te bieden heeft: variables, mixins, operations en functions. Zie http://www.lesscss.org

Let op: de voorbeelden hieronder verwijzen voor de duidelijkheid naar de standaard Protostar template. Uw paden kunnen afwijken. Opmerking: Als u de Protostar template wilt aanpassen is het een goed idee om een kopie van de template te maken en daarna deze kopie aan te passen - zodat Joomla! updates niet uw wijzigingen overschrijven.

Optie 1: importeer uw .css als .less files

(een beetje werk, maar de moeite waard, imho)

Laten we nu eens aannemen dat u uw aangepaste bestanden wilt gebruiken en wilt laten compileren door uw LESS compiler - u hoeft uw .css bestanden NIET te herschrijven naar LESS omdat standaard .css bestanden ook werken. Het enige wat u hoeft te doen is het hernoemen van uw .css bestanden naar .less en het toevoegen van een @import opdracht in bovengenoemde hoofdbestand /templates/protostar/less/template.less

Ik neem aan dat u uw aangepaste .css bestanden hernoemt naar .less in de /templates/protostar/less map. Nu opent u /templates/protostar/less/template.less en aan het eind van het bestand importeert u uw gewijzigde .less bestanden, zodat ze de bestaande declaraties overrulen:

@import "modules.less";
@import "components.less";
@import "articles.less";

Als u nu uw hoofd template.less bestand compileert, resulteert dit in één geoptimaliseerd en geminificeerd (als u dat wilt) hoofd template.css bestand. U vermindert uw http requests waardoor de site sneller wordt geladen. Nu kunt u stap voor stap beginnen met het gebruik van less variables in uw custom.less bestanden en andere leuke dingen die http://lesscss.org te bieden heeft.

Optie 2: gewoon importeren van uw .css / werkt niet voor overrulen

In /templates/protostar/less/template.less gewoon uw .css-bestanden importeren resulteert er in dat ze worden opgenomen als import in de hoofd template.css:

@import "../css/modules.css";
@import "../css/components.css";
@import "../css/articles.css";

Maar op deze manier krijgt u geen enkele optimalisatie. En een groot probleem is dat deze import altijd voor de andere declaraties wordt geplaatst - u kunt dus niet een bestaande declaratie overrulen.

Meer informatie is te vinden op:http://lesscss.org

Verwijzingen

http://kyleledbetter.com/jui/less/ - Voorbeeld voor het bouwen van uw eigen template.less