Tell me more ×
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It's 100% free, no registration required.
up vote 1 down vote favorite

I want to use LESS CSS processing for theme development. Normally to implement LESS processor all you need to do is to add following lines to <head> tag in your html

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

In Magento I tried to add following line to my local.xml file with no luck

<action method="addItem"><type>skin_css</type><name>css/custom.less</name></action>

This is so because LESS requires rel attribute to be rel="stylesheet/less" , but magento obviously adds just rel="stylesheet" with addItem method. I also tried to overwrite rel tag with <param>rel="stylesheet/less"</param>, but again with no result. Is there any workaround ? or any other solutions out there?
BTW. I did also find this this plugin, but this also did nothing.

share|improve this question

4 Answers

up vote 1 down vote accepted

I know this is what they call 'hack', but it solved my problem. After all it is only for development. I will compile normal css file later and remove less.js. So the solution is:
Add following lines to your local.xml file:

<action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action><!-- remove main stylesheet -->
<action method="addItem"><type>skin_css</type><name>css/styles.less</name><params>id="less"</params></action><!-- add you less file with id="less" -->
<action method="addItem"><type>skin_js</type><name>js/less.js</name></action><!-- include less compiler -->

and the 'hack' part is to open your less.js file and search for rel==="stylesheet/less" and change it to id==="less"
This solution is meant only for development. If you're done with less, compile it to css and remove those 3 lines from your local.xml
or if you are and you should, developing in localhost, you can just keep those 3 lines in your localhost and not in server install ;) This way all you have to do after finishing edit, is open cmd, compile css and upload it to server. Happy coding :)

share|improve this answer
up vote 1 down vote

A less savvy solution would be to place the script tag into the "Miscellaneous Scripts" area of System > Config > Design. This allows editing via CMS and you can configure it to be managed at differing store views. Not terribly elegant, but allows you the flexibility to add/remove in a dev environment at-will.

Less CSS in Misc Scripts

share|improve this answer
That's Nice solution, but you still have to remove default stylesheet in local.xml, so I think doing it all in there is quicker ;) Once you've edited your less.js for magento once, you can always use the same one. No need to do this every new project. So adding 3 lines to local.xml is quicker than using admin and local.xml anyway :) Also I have to point out that less.js has to be inserted after stylesheet, not before ;) Tnx for the answer anyway, it expanded my perspective to magento once more :) – ruuter Apr 14 at 7:49
up vote 0 down vote

I would be careful using less.js in a production environment. Each request to a page will require a new compilation of the less.css file. A more sustainable route is to look at your deployment, When you push a change live / development have the deployment compile the less into css.

That way you can minimize css, cache and help reduce load time.

share|improve this answer
I think a mentioned this many times in my answer. Using LESS is only for development. Always compile css for production environment. – ruuter Apr 14 at 21:49
up vote 0 down vote

Instead of hacking LESS, another option is to add something like the following to your local.xml:

<reference name="head">
    <block type="core/text" name="lesscss">
        <action method="setText">
            <css><![CDATA[<link rel="stylesheet/less" type="text/css" href="path/to/skin/custom.less" media="all" />]]></css>
        </action>
    </block>
</reference>

IMO, the best solution is to create a module that extends the Mage_Page_Block_Html_Head class and adds a addLess method or something, and also adds configuration in the backend: "enable live mode". Hmm, the module you linked looks interesting actually, if you have time you should look into why it's not working for you...

share|improve this answer
This is not working, because it adds this <link> to the end of <head> tag, after including less.js, but it has to be included before. Any tricks how to add <script> tag after it ? About the plugin. Yes, looks interesting, but did not work. I sent email to them, no answer yet and no time to wait. Right now my solution seems still quickest =) – ruuter Apr 15 at 5:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.