Tumblr Theme Development with Dropbox & LESS

This is a simple tip to speed up your tumblr theme development.

Most of the work on Tumblr themes is really just CSS. CSS preprocessors can make writing CSS a lot easier, so wouldn't it be great if you could use them while building your tumblr theme? With LESS CSS, you can.

LESS in The Browser

LESS is a CSS preprocessor that can run in the browser, so you don't have to install Ruby or Ruby Gems on your local machine (like you have to for SASS). Simply putting a script tag like this in your header is enough enable LESS on any webpage:

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.0.0-b1/less.min.js"></script> 

LESS in Dropbox

Fun Fact: you can actually use dropbox to host CSS files. All you have to do is put them in your Public folder. Once they're in your public folder, you can access their public URL. On a Mac, just right-click the file and click Copy Public Link to get that URL.

As you can image, this rule also applies for LESS CSS files. Change the file extension from .css to .less, copy the public link and use that file in your tumblr theme like this:

<link rel="stylesheet/less" type="text/css" href="https://dl.dropboxusercontent.com/u/######/style.less" />

Notice the rel attribute is set to "stylesheet/less" instead of "stylesheet/css". That bit will initiate the LESS interpreter on that file. Also, make sure the less.js script is included before the style.less file. Now you can use your favourite text-editor to edit you Tumblr CSS, while harnessing the power of LESS. Win!

For more information on LESS, check out the LESS documentation on client-side usage.

Note:This tip is great for development, but like the docs say, it's not recommended for production usage, so once you're finished writing your LESS, convert it to an actual CSS file to be included with your theme.

One More Thing

If you're doing some really intense tumblr development, checkout the Tumblargh Plugin for Middleman.