Using LESS in a dev environment with WordPress

To use LESS with WordPress, the simplest/fastest solution I could think of seems to be:

  1. Compile LESS on the client-side with Javascript when making changes to the site;
  2. When done, compile the LESS file into CSS and overwrite the stylesheet used in production.

This also means you get different stylesheets for dev and production.

Quick setup:

This goes into functions.php:

// Define dev enviroment only if user is logged in as admin
if (is_super_admin()) {
  define('ENVIRONMENT', 'dev');
}

function custom_load_LESS() {
 if (ENVIRONMENT == "dev") { ?>
 <script type="text/javascript">less = { env: 'development' };</script>
 <link rel="stylesheet/less" type="text/css" href="/css/app.less">
 <script src="/js/vendor/less-1.3.0.min.js" type="text/javascript"></script>
 <?php }
}
// Priority 99 - will be loaded last
add_action( 'wp_head', 'custom_load_LESS', 99 );

Now if you are logged in as admin, the LESS file will be compiled in your browser, everyone else gets the regular CSS files in your header.

Once you’ve finished development, you’ll need to manually compile the LESS file into regular CSS and overwrite the old stylesheet. You can use an online LESS compiler or get a desktop app. I develop on my personal Linode, so I just use lessc command-line tool.

This is a quick and dirty solution so I assume there is probably a better way.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>