Grow your CSS skills. Land your dream job.

less.js and wordpress

  • # August 31, 2011 at 6:04 am

    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

    # 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

    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.

    # August 31, 2011 at 10:45 am

    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.

    # September 8, 2011 at 11:58 pm

    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

    # January 24, 2012 at 6:39 pm

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

    # March 2, 2012 at 10:52 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′);
    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".