LESS compiler for WordPress

can I compile some .less-files automatically by using WordPress. I found just lessphp

Thanks
Ogni

Related posts

Leave a Reply

4 comments

  1. Alternative see the lessphp Project: https://github.com/leafo/lessphp

    Works fine and hase an team of contributor. But has not an out of the box function for WordPress; but uts only PHP and the WP has the right Hooks. Do you will only use in themes, then its also fine, that you include this and it works with your requirements and no dependencies to an plugin.

    For an easy use in WP, see this project https://github.com/sanchothefat/wp-less
    its an wrapper and use lessphp; but an new dependencies. But its better as an plugin, if the customer change the plugin with updates and other doings, and easy to use.

  2. Take a look at #BW LESS CSS Plugin in the repo.

    From the plugins description:

    Attach .less files to your template using the plugin admin page, under #BW Options -> LESS-CSS

    • Specify files relative to your theme root (eg. style.less for a file in the root)
    • If using a specialty stylesheets (eg. for print), select the media type
    • To target mobile devices, check the mobile checkbox (see FAQ below) 3d. To minify (compress) the compiled CSS, check the minify checkbox
      Manually include .less files:
    • To hard-code a .less file into a template, use <?php bw_less_css( $file, $args = array() ) ?> in a template file, called by after_setup_theme action.
        add_action( 'after_setup_theme', 'lesscss_include' );
        function lesscss_include() {
            bw_less_css( 'style.css' );
            bw_less_css( 'css/print.css', array( 'media' => 'print', 'minify' => true, 'mobile' => false, 'force' => false );
        }
    

    Files are relative to the theme root, and the less compiler will save the .css to the same path as the .less file.
    If you are using @import to compile multiple stylesheets into a single file, such as Twitter’s Bootstrap, turn on developer mode while developing to force the stylesheets to recompile every time the page is loaded. If developer mode is off, imported stylesheets will not be recompiled unless you re-save the main stylesheet. If manually including less files using bw_less_css(), set 'force' => true argument.

  3. You should avoid compile CSS each time visit your website, unless you have a cache solution. I suggest you use the the task runner of Grunt.js for accomplish compile LESS once only. You can compile LESS files upon your development environment while editing files, you can add watchers as well for fast compile even add a livereload for fast development.