Using LESS CSS with MODX

• 1) install the lessphp compiler (http://leafo.net/lessphp/) into the core directory: "core/components/lesscss/lessc.inc.php"
• 2) create a snippet for the compiler (I named mine "lessCSS"):

<?php

// get the contents of the less file
$string = file_get_contents($modx->config['base_path'].$path.$file);

// run if not empty
if ($string) {
	
	// load the lessphp compiler
	$core = $modx->config['core_path'];
	require_once($core.'components/lesscss/lessc.inc.php');
	
	// add a variable to get the path to the actual file
	$string = '@tpl: "'.$modx->config['base_url'].$path.'";'.chr(10).chr(10).$string;
	
	// compile and return css
	$lc = new lessc();
	return $lc->parse($string);
}

• 3) create a new modx resource for the css.[list]
  [li]name it whatever you want
• set the content type to CSS
• set cacheable to off
• in the content, call the lessCSS snippet (uncached) with the following variables:[list]
  [li]path = the path to the less file relative to the base url
[li]file = the name of the less file

[[lessCSS? &path=`assets/templates/mytemplate/` &file=`style.less`]]

• 4) Add the link to your css resource to your template and you’re done!:

<link rel="stylesheet" type="text/css" href="[[~#]]" /> 

• Caching: I set it up with the snippet and the page as uncached so that it doesn’t recompile every time the page is called. When you are editing the file, just uncheck the cacheable option on the Stylesheet resource—when you’re done, make it cacheable again.
[li]Paths: when adding urls to a CSS file, the links are relative to the file itself; since the css that is being generated is technically wherever your CSS resource is in MODX (not where the less file is) this can get a little annoying when it comes to paths. That’s why I separated out the path and file in the snippet; the snippet adds a @tpl variable to the less output (before compiling) that points to the location of the less file. That way you can save a little bit of time by doing something like this: url({@tpl}images/test.jpg); instead of something like this: url(/assets/templates/mytemplate/images/test.jpg); every time you want a url relative to your less files. You could of course rename @tpl (in the snippet) to anything that makes sense to you.

• Arguments to mixins are separated by ; instead of ,.
Rationale: the value of a css property can contain commas, so by using a comma as an argument separator you limit the kinds of input you can pass to a mixin.

I use LESS but in a totally different way:
I don’t try to integrate it with MOdX.

I think that LESS is really nice, but since MODx has no predefined blocks, it is not really needed on production website.
So i use it outside of MODx in development and use the cache.css file in production.

The onl missing feature imo is to allow CSS comments in the cache file. It could be useful.

• 1. I added the line to set the import directory before running the compiler. This allows you to use the @import tag properly (since lessphp is being run on a string). This directory is the one passed in the &path attribute.
• 2. I decided that I didn’t like to have to add a variable to all of my urls—too much of a pain. I added a little preg_replace at the end to automatically add the path to all urls in the output (it has to parse after the compiler to make sure that any @import tags are processed properly). So, just write your less with paths relative to the less file (just as you would CSS).
[li]On a somewhat related side note: I discovered that @media queries are only supported in version 0.2.1 of lessphp—which is available on github, despite all the download links pointing to version 0.2.0. You just have to download the actual "lessc.inc.php" file instead of the zipped up package.

// get the contents of the less file
$string = file_get_contents($modx->config['base_path'].$path.$file);

// run if not empty
if ($string) {
	
	// load the lessphp compiler
	$core = $modx->config['core_path'];
	require_once($core.'components/lesscss/lessc.inc.php');
	
	// compile and return css
	$lc = new lessc();
	$lc->importDir = $modx->config['base_path'].$path;
	$string = $lc->parse($string);
	
	// add the relative path to all urls
	$string = preg_replace('/(url\(\"?)(.+)(\"?\))/i', '${1}'.$modx->config['base_url'].$path.'${2}${3}', $string);
	
	// return the CSS
	return $string;
}