Tag Archives: bonestheme

Less To CSS ? You Jest.

I’ve spent the last several hours shaving a yak

yakshaving

The term refers to the act of getting completely side-tracked from your goal because one of the intermediate steps to the ultimate goal sucked all your time.

What is Less ?

Apparently, web UI programmers decided that straight css was either evil and not high-level enough or both,  so they invented a pre-processor on top of it called  less. Problem is, there are a number of less to css compilers out there. Some have become dusty, old and broken, or they don’t run on your platform, or require you to install large amounts of stuff I didn’t actually need.
Here are just a few Less compilers I ran across:

  • Pretty- MAC and Windows tools like simpless.
  • There is a php based one called lessphp
  • There  is one written in  ruby
  • There is one written in python

NONE of these worked for  my simple requirements – Linux-based, command line. In my attempts to work with boostrap3, font-awesome and the bonestheme frameworks. All three of these are packaged up as a baseline, no-frills wordpress theme and called brew which is just what I needed.

The tool I ended up using was a javascript compiler written in the node.js  framework. I haven’t been involved with node.js but I will acknowledge it is a possible wave of the future, as it further detaches the business  logic of a web site from the rendering.

I attempted to install node.js from source under Centos 5 and gcc 4 following these instructions, but they led to a dead end like the rest and I was running out of time.

Finally, I installed the binary distribution of node.js which worked fine. It also installs the node.js package manager npm So the final step was to install the less compiler with with:

npm install less --global

Finally, this is all I needed to generate the bonestheme css:

#!/bin/bash -v
#
LESSC=/usr/local/bin/lessc
SRC=library/less
DST=library/css
$LESSC $SRC/ie.less $DST/ie.css
$LESSC $SRC/login.less $DST/login.css
$LESSC $SRC/style.less $DST/style.css

I keep this script down in a child-theme of brew, in /library/, whenever I update one of the less files, I just run the script.

I was not able to google this exact recipe, so I thought I’d post it.

UPDATE: I was able to get a smooth install from source on a Centos 6 box following these instructions then finishing up with:

npm install less --global