[LESS] CSS bestanden daadwerkelijk importeren en compilen

[TheNephilim]

Sinds een tijdje ben ik wat aan het stoeien met Gulp/Bower/etc. om m'n workflow te verbeteren. In plaats van tig verschillende .js/.css bestanden gewoon concatten naar één bestand bijvoorbeeld.

Na Grunt kwam ik bij Gulp terecht en daarmee kun je gemakkelijk LESS bestanden compilen. Alleen kom ik erachter dat @import van .css bestanden ook daadwerkelijk een @import achterlaat in de CSS.

Dus nu krijg ik een vendor/<name>/css/<name>.css bovenin m'n CSS bestanden. Is er een manier in LESS om die CSS bestanden daadwerkelijk te importeren bij het compilen van het LESS bestand?

[Gtoniser]

Ja.
Zie: http://lesscss.org/features/#import-options

[markvt]

bla.less:

code:

@import "icons.less";
@import "Style.less";

Importeer je een .less bestand of een .css?

[TheNephilim]

Gtoniser schreef op dinsdag 31 maart 2015 @ 11:10:
Ja.
Zie: http://lesscss.org/features/#import-options

Wow hey, bedankt! Ik was al aan het zoeken op 'import' op diezelfde pagina. Kon niks vinden! Slecht geslapen vannacht, maar die had ik toch moeten vinden of niet?

Maar dat ga ik even proberen!

markvt schreef op dinsdag 31 maart 2015 @ 11:12:
bla.less:

code:

@import "icons.less";
@import "Style.less";

Importeer je een .less bestand of een .css?

CSS bestanden! Een bepaalde vendor levert geen LESS bestanden, maar de CSS bestanden importeert hij niet daadwerkelijk.

[markvt]

Dan gewoon de .css bestanden hernoemen naar .less

[R4gnax]

Gtoniser schreef op dinsdag 31 maart 2015 @ 11:10:
Ja.
Zie: http://lesscss.org/features/#import-options

Let daarbij dan wel op dat je niet @import (inline) "<file>" zou moeten gebruiken, maar @import (less) "<file>".

Die eerste zal namelijk de content v/h bestand letterlijk zonder enige aanpassing dan ook in je file opnemen; relatieve URLs in het geimporteerde CSS bestand worden daarbij dus ook niet correct aangepast.

De variant die je zou moeten gebruiken zegt tegen de compiler dat het CSS bestand als LESS geinterpreteerd moet worden, waardoor zaken zoals het herschrijven van relatieve URLs ook werken zoals verwacht. Voor 99.99% van alle CSS zal dat gewoon goed gaan, aangezien LESS syntax een superset is van CSS. Die paar waar het niet goed gaat betreft het vaak 'browser hacks' die je eigenlijk niet zou moeten gebruiken, of malformed CSS. (De LESS compiler implementeert het error recovery aspect van een CSS parser bewust niet.)

markvt schreef op dinsdag 31 maart 2015 @ 11:16:
Dan gewoon de .css bestanden hernoemen naar .less

Nee.

@import (less) "<file>" gebruiken en die CSS bestanden gewoon lekker met rust laten.

[ Voor 3% gewijzigd door R4gnax op 31-03-2015 11:19 ]

[TheNephilim]

markvt schreef op dinsdag 31 maart 2015 @ 11:16:
Dan gewoon de .css bestanden hernoemen naar .less

Dat is juist niet handig als je iets als Bower als package manager gebruikt.

R4gnax schreef op dinsdag 31 maart 2015 @ 11:18:
[...]


Let daarbij dan wel op dat je niet @import (inline) "<file>" zou moeten gebruiken, maar @import (less) "<file>".

Die eerste zal namelijk de content v/h bestand letterlijk zonder enige aanpassing dan ook in je file opnemen; relatieve URLs in het geimporteerde CSS bestand worden daarbij dus ook niet correct aangepast.

De variant die je zou moeten gebruiken zegt tegen de compiler dat het CSS bestand als LESS geinterpreteerd moet worden, waardoor zaken zoals het herschrijven van relatieve URLs ook werken zoals verwacht. Voor 99.99% van alle CSS zal dat gewoon goed gaan, aangezien LESS syntax een superset is van CSS. Die paar waar het niet goed gaat betreft het vaak 'browser hacks' die je eigenlijk niet zou moeten gebruiken, of malformed CSS. (De LESS compiler implementeert het error recovery aspect van een CSS parser bewust niet.)

Oké nou ik heb nu inline gebruikt en dat werkt in ieder geval. Sowieso moet ik nog het een en ander instellen, ook met relatieve URL's inderdaad. Ik ben al heel blij dat ik nu maar één CSS en één JS bestandje heb. Zeker op websites met https scheelt dat nogal, gezien je anders veel meer requests doet.

[Grijze Vos]

Als je (inline) ipv (less) gebruikt gaat het nat op het moment dat je een relatief pad gebruikt, en de css file staat in een folder dan je less file.

[R4gnax]

Grijze Vos schreef op dinsdag 31 maart 2015 @ 13:30:
Als je (inline) ipv (less) gebruikt gaat het nat op het moment dat je een relatief pad gebruikt, en de css file staat in een folder dan je less file.

Da's inderdaad wat ik al zei.

[TheNephilim]

Dat klopt, maar om dat nu voor te zijn, heb ik de volgende directory structuur:

assets
assets/css
assets/less
assets/vendor/less

Eigenlijk zou less in iets van src/ of resources/ moeten staan, maar dit werkt ook prima.