Using less.js with WordPress

Over the last few weeks I have been reading more and more about speeding up your workflow by using augmented CSS.

For those of you not familiar with LESS, or {less} as its branding suggests, it is a ‘Dynamic stylesheet language’. Allowing you to use variables, mixins, operations and functions with in your CSS. There are plenty of article preaching the advantages of using less.

There are a couple of different flavours of LESS. Server side, an osx app (LESS.APP) and a client side alternative, using less.js.

Most of my work is with in WordPress on a development server, I decided that the best option for me was to use the client side less.js while developing sites and then compile the css stylesheet before launching a clients site.

The problem I ran into was that WordPress needs a Style.css file for the theme to be accepted. I tried installing the theme with this file and then swapping it out for a style.less file, however I kept running into issues and theme would break.

After googling and trying all sorts of things, @importing and all sorts of work arounds, I finally came up with a solution. I thought I would post it here in case there are others struggling with this.

In order for less.js to work it must be downloaded and installed on your server.

For non WordPress sites you can then in the <head> you reference your less file, followed by calling the less.js:

<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>

For WordPress all you need to do is have a style.css as normal with all the theme information, and then a separate for for .less. We will call it main_styling.less.

As follows:

Style.css

/*
Theme Name:Your Theme
Theme URI: http://testing.com
Description: A Theme
Verision:1.0
Author:Matt Edwards
Auther URI:http://www.emptyhead.dev
*/

Then in the <head>:


<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css">
<link rel="stylesheet/less" type="text/css" href="<?php bloginfo('template_directory'); ?>/main_styling.less">
<script src="<?php bloginfo('template_directory'); ?>/js/less-1.1.3.min.js" type="text/javascript">

and its all up and running.

Hope this saves you some time if you were stuck where I was.