LESS - Leaner css (a css extension ala SASS)

A version of CSS put together with a compiler called LESS, which stands for Leaner CSS.
LESS Features

LESS augments CSS with 4 main features: variables, mixins, nested inheritance and operations.

Variables let you specify values in one place, like color or widths, and then re-use them throughout the document. So you could for example specify a palette at the top of the file and then re-use it around the stylesheet.

Mixins are classes that can be embedded in other rules. The syntax is the same as a class (it actually is just a class, “mixin” is just the term used for the feature), and so by referencing that class name in another rule set you can “mix-in” all of the properties of that class to that rule set.

Nested inheritance is where instead of writing out each rule set separately you nest rules inside one another. This makes the structure of the stylesheet more organized and easier to understand.

Operations are just that — operations: division, multiplication, addition and subtraction. This helps you set up declarations which may be tied to sizes or colors of other declarations.

• 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
• &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.