#658 ✓resolved

Feature request - Implement LESS stylesheet compiler

Reported by dleffler | July 5th, 2012 @ 06:24 PM | in 2.1.0 (closed)

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

Comments and changes to this ticket

  • dleffler

    dleffler July 6th, 2012 @ 02:58 PM

    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?
  • dleffler

    dleffler July 6th, 2012 @ 09:55 PM

    • Milestone set to 2.1.0
    • Milestone order changed from “192” to “0”
  • dleffler

    dleffler July 10th, 2012 @ 08:10 PM

    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'?
  • dleffler

    dleffler July 11th, 2012 @ 12:33 AM

    • Assigned user set to “dleffler”

    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'
  • dleffler

    dleffler July 11th, 2012 @ 12:41 AM

    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?
  • expNinja
  • dleffler

    dleffler July 20th, 2012 @ 08:28 PM

    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
  • dleffler

    dleffler September 29th, 2012 @ 02:18 AM

    • Milestone order changed from “10” to “0”

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

  • dleffler

    dleffler October 2nd, 2012 @ 01:31 PM

    • State changed from “new” to “resolved”

    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

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

Bug Tracker for Exponent CMS

Shared Ticket Bins

People watching this ticket