LESS is a dynamic stylesheet language which extends CSS with dynamic behavior such as variables, mixins, operations and functions.  This functionality makes it much easier to create flexible stylesheets since redundant styles and style variations can be handled by the compiler/server instead of the designer.  Exponent (now) uses 'less.php' to pre-process or compile .less files into .css files which are used by the browser.  Web pages can ONLY use .css file, NOT uncompiled .less files.

In a basic sense, any .css file can be converted to a .less file by simply changing the file extension (to .less).  To learn more about less.php, visit here.  There is also a javascript method to reference .less files in the web page and compile them when the page is displayed.  This method is NOT used by Exponent, but can be found here.

Using .less within Exponent is fairly simple and can be done several ways.  For the most part, .less files can be used anywhere you can load a .css file programatically ({css{ smarty/template function, expCSS::pushToHead(), or expTheme::head()).  Exponent compiles .less files into .css files if needed and caches them in the '/tmp/css' folder.  When error reporting (Development) is turned OFF, the .less file is only compiled if the associated .css file is missing.  When error reporting (Development) is turned ON, the .less file is also compiled if the .less file or any passed variables change. In practice, all .less files should be placed in a subfolder named 'less' in the same folder as the 'css' subfolder is located.  The .less file is compiled into the 'css' folder using the same name as the .less file.

Using .less files within your theme template:

• The easiest way to use .less files within your theme is to simply create a folder inside your theme folder titled 'less'.  Place your .less files here and they will be compiled into a .css file(s) in the theme's 'css' folder with the same name.  This will occur automatically if the expTheme::head() configuration is passed "css_theme"=>true" which is usually the case.  Please keep in mind that EVERY .less file in the /less folder will be compiled into a .css file using the 'true' parameter!  In many cases, .less files include (@import) several additional .less files to create one composite .css file.
• If you follow the standard practice and combine all your .less files into a single .css file, you could instead pass css names to the expTheme::head() configuration.  Only those specific theme .less files will be compiled, then only those .css files will be loaded with the page.  This is how expTheme::head() normally acts when passing a name to the 'css_theme' parameter.  The name must NOT include the file extension!
• You may also pass .less files outside the theme folder by using the 'lesscss' parameter which works like the 'cssprimer' parameter and requires the complete pathname including file extension.

  "lesscss"=>array(
      "framework/modules/navigation/assets/less/nav-bootstrap.less",
  ),

• Or if you need the stylesheet loaded early to act as a base style to be overridden by a theme style, you can make it a 'primer
   

  "lessprimer"=>array(
      "external/bootstrap/less/bootstrap.less",
  ),

• Finally, you may pass variables to the lessphp compiler and all .less files by using the 'lessvars' parameter.  This really comes in handy for dynamically passing theme configuration settings/changes into the stylesheets.

  "lessvars"=>array(
      'swatch'=>SWATCH,
      'special'=>"#FFEEDD"
  ),

Using .less files in your views/templates:

• Stylesheets within views/templates are referenced using the {css} smarty function block.  This function accepts the same parameters as the expTheme::head() method referenced above.

  {css unique="lessexample" lesscss="`$asset_path`css/announcement.less"}

Using .less files in your php code:

• Adding stylesheets to a page using php code is accomplished using the expCSS::pushToHead() method.  The parameters are identical to that already described.

Custom 'Mixins':

• We also now include a custom 'mixins' file which is located in /framework/core/assets/less/exponent.less.  This mixn may be included in your .less file by adding the following line to the top.

 @import '/framework/core/assets/less/exponent.less'

• Here are some of the mixins found in exponent.less:
  • .border-radius and .border-radius-custom
  • .box-shadow and .drop-shadow
  • .gradient and .quick-gradient
  • .reflect
  • .opacity

For more information about the expTheme::head() method and its parameters, visit here.