less.js and wordpress
# August 31, 2011 at 6:04 am
Trying to get less.js working in wordpress, has any managed to get this to work??
Am I missing something? I have the scripts etc referenced properly but I am ending up with a blank style sheet, and when I try to compile using less.app I get a syntax error on line one of the wordpress style.css.
Do I need a style.css and then another .less file or something?
Thanks for your help
Matt# August 31, 2011 at 6:45 am
So I worked out I did have it all set up properly… it was actually this line that less.js was cracking it at:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#ff0000′, EndColorStr=’#111111′); /* IE6–IE9 */
So the next question… can you use IE filters and less.js.. hmm# August 31, 2011 at 10:21 am
In case others find this link as I did trying to search less.js and WordPress.
1) you can use IE filters with less. You have to escape them.
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#ff0000′, EndColorStr=’#111111′);
filter: ~”progid:DXImageTransform.Microsoft.gradient(startColorStr=’#ff0000′, EndColorStr=’#111111′)”;
2)You can use import in less. I’ve found relative paths to work best depending on how you end up compiling them at the end. Make sure you check your browser console if things are breaking.
3) Just found winLess and highly recommend it for use with any less work; especially wordpress. There are mac and linux versions but as a windows user winLess was the choice for me since installing node.js wasn’t as quick as I’d hoped. With winLess you can make 2 stylesheets, style.less and style.css and work only in style.less and winLess with auto-compile to style.css when saving the file so that you can just make your changes, hit save, then refresh your browser to see your WP work.
4) And finally. If you don’t use winLess or want to use less.js enqueue all your scripts, even style.css, then hook to the print_styles action, and preferrably combine the stylesheets then output them as type=”stylsheet/less” for less to work and use the less extension. There are plugins out there that will automatically combine the enqueu’d styles. You can grab one and modify it ever so easily to change the type. Then enqueu less.js right afterwards. I know that’s vague for novice WP users but sorry; it gets complicated and would take too many words here to explain it in step by step directions.
You must be logged in to reply to this topic.