Home

Eeless makes it easy to implement {LESS} CSS in your expression engine templates without having to rely on browser side compilation of your style.less into style.css.

I dislike relying on browser side processing because the browser may have JS off, the JS may run slowly, and I just like to know what's being sent. More about less can be found at http://lesscss.org/.

Installation

As with every other module you've ever installed - just drop the appropriate folder into the system/expressionengine/third_party folder. Then visit Add-Ons > Modules and you should see a new entry for 'Eeless'. Click 'Install' (over on the right) - and then click on the newly red and shiny 'Eeless'.

This takes you to the module overview page. Your paths are probably all blank - so click EDIT and fill them in. If you also upload the 'assets' folder included in this repo, and outlined below, you should end up with something like this:

eeless_less_serverpath	/long/server/path/assets/less/
eeless_less_browserpath	/assets/less/
eeless_css_serverpath	/long/server/path/assets/css/
eeless_css_browserpath	/assets/css/

You are now ready to roll. The assets/less example in this repo as shown in the code examples below will provide a slightly hacked about with version of the LESS from http://twitter.github.com/bootstrap/ to give you something to test with out of the box.

The Code

The template code for eeless couldn't be simpler. Just replace your standard CSS path with something like this:

<link href="{exp:eeless:compile less="bootstrap.less" css="master.css"}" rel="stylesheet">

Where the less="blah" section directs the script to the less files, and the css="blah" tells the compiler where to drop the finished file. In the example above we've kept it simple, but you can structure your less and/or css files a little better with something like:

<link href="{exp:eeless:compile less="core/bootstrap.less" css="core/master.css"}" rel="stylesheet">

Eeless will simply add these paths to those set in the module settings. NOTE: For now you need to make sure the target CSS folders have been created already. You will get a useful error message if you forget though!

Where to set your paths

Most #eecms devs that I know, will have an .htaccess file with a line something like this:

RewriteCond $1 !^(images|themes|favicon\.ico|robots\.txt|index\.php|admin.php|assets) [NC]

Where the final value (assets) is exempting an assets folder which will contain css, js, jpg etc... files which will be served directly - bypassing any expression engine processing. I always reside by Eeless paths within this assets folder. Something like this works for me:

• assets
• css
• less
• js
• img
• images
• system
• templates
• themes

Make sure that your css folder is writable by Expression Engine. This is the only location that Eeless will need to create files within. Give it the same settings as your images/uploads folder - typically 777 as advised in the EE install guide.