less.js and wordpress

[mtedwards]

Hi Guys,

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

[mtedwards]

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

[SgtLegend]

Currently LessCSS as its known doesn’t support the IE filter property, an easy solution to get around this would be to use JavaScript to manually set the property for IE only which is a bit redundant but apparently the developers of LessCSS are working on supporting filter in a future release.

[mtedwards]

Ah… thanks for that. I have found since then you can also exclude particular lines by placing ~ before them… will have to work all that out.

[mtedwards]

Hmm… Ok.. now I’m still running into trouble using Less.js and wordpress

Has anyone worked out if you can @import a .less file.

using and referencing style.less causes all sorts of trouble with the theme freaking our because it can’t find its style.css file

[itsonlybarney]

@mtedwards I am under the impression that you can use @import for .less files, the same as you can with .css

[mneil]

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′);
becomes
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.

[Author]

Posts