Feature request - Implement LESS stylesheet compiler

[exponentcms]

In recent discussions on irc, it was noted that we might want to begin to implement the LESS css compiler package which ehances stylesheet creation by allowing variables and treats stylesheets like Smarty uses templates for html. LESS is used by Twitter Bootstrap and Font Awesome, but would also be useful even if used standalone. http://lesscss.org and there is a php implementation http://leafo.net/lessphp

[exponentcms]

We'd likely want to implement this:

• through expCSS?
• via lessphp as a 'caching compiler', HOWEVER the syntax is NOT identical to less.js ("mixin's" comma vs semi-colon?)
• allow turning compilation off via the site configuration minification tab, e.g., it would use less.js to compile .less files on page load in the browser for development, but use lessphp to compile/cache to .css files if desired?

[exponentcms]

[bulk edit]

[exponentcms]

Upon further pondering...we probably want to:

• only use lessphp, less.js won't be needed
• implement .less compiling/translation primarily within expCSS:pushToHead
• add ['less'] named array to expTheme:head call and {css} smarty plugin
• place compiled .less files in '/tmp/css' folder
• use filemtime to determine if .css file needs to be rebuilt from .less file
• add minification flag to 'always recompile .less files'?

[exponentcms]

Initial implementation working locally:

• adds a ['lesscss'] parm to expTheme:head and {css} smarty block function to pass .less files instead of/just like passing .css files
• also searches '/less' or '/less_variationname' folders in current theme if "css_theme"=>true
• lessphp does date calculation on whether to recompile
• stores cache in /tmp/css, so clearing the css cache will force a recompile of all .less files
• saves/stores .css output file in /css folder of same parent folder...e.g., if the .less file is '/external/bootstrap/less/bootstrap.less', the saved .css file is '/external/bootstrap/css/bootstrap.css'

[exponentcms]

Would be nice to develop a method for integrating variables/config settings into the .less compile process. Have already modified less.inc.php to allow passing a variable array to lessc::cexecute(), but need to determine how best to pick it up.

• a .less file containing only variables included by the @import command?
• use the existing theme/variation config file?
• a .less.config file in the /less folder?

[exponentcms]

(from [785a57b78aba1ed24f8ec7a83afa4e9b48cc905c]) Initial implementation of the LESS stylesheet compiler[#658] https://github.com/exponentcms/exponent-cms/commit/785a57b78aba1ed24f8ec7a83afa4e9b48cc905c

[exponentcms]

This is implemented currently in the following mannger in expTheme::head(), expCSS:pushToHead & {css} smarty function:

• a 'lesscss' array item with a list of .less files to compile or a single file in the case of the {css} smarty function
• a 'lessvars' array item with an associative array of variables names and values to pass to the lessphp compiler. This is a local customization NOT in the current version of lessphp.
• in expTheme::head, the css_theme processor (expCSS::themeCSS) will use the value of true, or an array of filenames to compile associated .less files before adding them (uses lessvars if set.

The .less file will be (re)compiled if:

• it is newer than the last cached compilation
• the 'lessvars' have changed
• the output .css file is missing

[exponentcms]

as a note, twitter-bootstrap 2.1.1 will NOT compile w/ lessphp, you must use 2.1.2wip

[exponentcms]

We'll call this one complete as the implementation seems to work...will reopen if during the jquery integration we come up with a better implementation strategy

[exponentcms]

Lighthouse URL: https://exponentcms.lighthouseapp.com/projects/61783/tickets/658