Usage of less mixins (like less hat)

[bernhardh]

I have the following problem by using "less hat" (http://lesshat.madebysource.com/) and sprockets.

I justed required the lesshat.less file inside my main.less: //= require lesshat.less

And get the following error: Twig_Error_Runtime [ Error ]: An exception has been thrown during the rendering of a template ("parse error: failed at var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})()); ` line: 97") in "partials/html_header.twig" at line 7.

If I remove the require, everything works fine. I don't think its a problem of lesshat, since the same file worked with fuelphp and less before I used sprockets!

Do you have any ideas why it doesn't work?

[vesselinv]

From I can tell, Less Hat is meant for client-side usage and the lessphp compiler doesn't seem to support inlined js functions, such that lesshat depends on.

What you can do is include the less.js parser into your javascript manifest and simply place your less source inside public/assets/css and have it be compiled on the client side:

// fuel/app/assets/js/application.js

//= require http://cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js

// fuel/app/views/index.php
// ...
<link rel="stylesheet/less" type="text/css" href="assets/css/lesshat/build/lesshat.less">
<?php echo Sprockets::js('application.js'); ?>
// ...

[bernhardh]

Thank you for answering!

To add less.js and lesshat as additional files isn't a good solution for me. One of the reasons why I am using sprockets, is to reduce/avoide requests by combining files. On the other hand, I will result in bigger filesizes, by adding these files and the client need JS support to get the correct styling.

I am just wondering, because in my other projects, I am using https://github.com/kriansa/fuel-less and there I hadn't had any problems with lesshat oder similar?

[vesselinv]

Just as I suspected - the package you mentioned uses nodejs directly to compile less (because lessphp doesn't feature that) as well as lessphp. I'm concerned that adding nodejs operations would make sprockets dependent on external libs. Looks like fuel-less comes with buil-in node executables but I'd rather not go that route. Did you try compiling less hat via node (it should give you pure less without the js stuff) and then running the output through sprockets?

[bernhardh]

Yes you are right, I saw that in kriansa/fuel-less uses node as default parser. I thought that it uses lessphp, but that is only optional!

Siince your lib has some other limitations and missing features I would need for my project, I will make my own one. These are missing image support (there is no code for that, although your doc talk about it), no font-support (ok, I knew that) and no possibility of hierarchical overloading of assets / no possibility to place assets in modules or packages.

Thank you for your work and your help!