sgLESSPlugin plugin
==============

The `sgLESSPlugin` adds variables support to CSS files and other cool features like mixins, nested inheritance, accessors and importing.

Summary of Features
-------------------

  * augments CSS with some great features: variables, nested inheritance, mixins and accessors and other neat stuff
  * imports multiple files into a single file or output
  * provides symfony module/action to dynamically parses variables, substitutes variables with content and outputs resulting CSS to browser
  * provides symfony cli task to generated parsed CSS for static/manual inclusion

Variables are defined in a file with extension .less which also includes CSS code that uses these variables. 

Example of *myfile.less*
    
    [css]
    
    /* variables */
    @pagewidth: 960px;
    @purple: #5d2458;
    
    body {
        background-color: @purple;
    }
    
    .wrapper {
        width: @pagewidth;
    }
    
    /* nested */
    
    .bottomnavigation {
    width: @pagewidth;
       a {
          color: #000;
                   :hover {
                   color: #ffcc00;
                    }
          }
    }
    
    /* mixins */
    
    .round_corners {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    
    }
    
    #pricebox {
    .rounded_corners;
    }
    
    #promobox {
    .rounded_corners;
    background-color: #fc0000;
    }
    
    
    /* accessors */
    
    .article {
    color: #010101;
    }
    
    .comment {
    color: .article['color'];
    }
        
The resulting output will be:

    [css]    
    body {
        background-color: #5d2458;
    }
    
    .wrapper {
        width: 960px;
    }
    
    /* nested */

    .bottomnavigation {
    width: 960px;
    }
    
    .bottomnavigation a {
    color: #000;
    }
    
    .bottomnavigation a:hover {
    color: #ffcc00;
    }
        
    /* mixins */
    
    .round_corners {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    
    }
    
    #pricebox {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    }
    
    #promobox {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background-color: #fc0000;
    }

    /* accessors */
    
    .article {
    color: #010101;
    }
    
    .comment {
    color: #010101;
    }

Importing example
-----------------

With `sgLESSPlugin` it is possible to import external *.less* declarations into another *.less* file. For example, 
you can define your variables in a *.less* file and import it in other *.less* files. The importing and parsing happens on the server-side,
so variables defined in one file are valid in the others.

*definitions.less* 

    [css]
    @CHARSET "UTF-8";
            
    /* variables definition */
        
    @maincolor: #fff;    

*my.less*

    [css]
    /* Example of importing an external LESS file that contains variable definition */
    
    @import url("definition.less");
    
    body {
        color: @maincolor;
        
    }

*Output*

    [css]
    body {
        color:#ffffff;
    }


Installation & Usage
--------------------

  * Install the plugin

        $ symfony plugin:install sgLESSPlugin
        
  * Enable Plugin (Only for Symfony 1.2 and above)

   Modify *config/ProjectConfiguration.class.php*
   
        [php]
          public function setup()
          {
            // for compatibility / remove and enable only the plugins you want
            $this->enableAllPluginsExcept('sfDoctrinePlugin');
        
            // or
            
        	$this->enablePlugins(array('sfPropelPlugin', 'sgLESSPlugin'));
        	$this->disablePlugins(array('sfDoctrinePlugin'));
        
          }        
         

  * Enable module
  
    .less files can be parsed dynamically accessing them with */sgless/myfile.css*. The plugin will look for
    a file myfile.less in *web/css*. To allow this, the sgless module must be enabled by editing *apps/appname/settings.yml*
    
        [yml]
        all:
          .settings:
            enabled_modules:        [default, sgless]        
  
  * Enable route
  
    To make */sgless/myfile.css* work, the route must be setup by editing *apps/appname/routing.yml*
    
        [yml]
        sgless:
          url: /sgless/:name.css
          param: {module: sgless, action: parse}        

  * Create your */css/myfile.sgless*
  
    .less files are the source CSS files that contain all the standard CSS code plus the variables definition. Variables are defined by:
    
        [css]
        /* syntax */
        @varname: varvalue;
        
        /* example */
        @mycolor: #fefefe;
    
    Then variables are using by their name:
    
        [css]
        
        body {
            background-color: @mycolor;
        }
        
    The resulting output will be:
    
        [css]
        
        body {
            background-color: #fefefe;
        }        
            
    The css code is accessed by linking to */sgless/myfile.css*


    That's it!

Parsing Files Manually With CLI task
------------------------------------

If you prefer to parse the files manually and link directly to the parsed and processed file, you can parse the .less files using the provided symfony task `sgless:parse`

    [cli]
    php symfony sgless:parse ./web/css/example.less ./web/css/example.css
    
Then you can link directly to */css/example.css*

Reserved Words
--------------

The following words cannot be used as variables as they have meanings in CSS syntax:

  * @charset
  * @font-face
  * @import
  * @media
  * @page
  * @namespace

TODO
----

  * Compress/minify CSS 
  * Detect unused variables
  * Implement if/switch
  * browser based conditionals
  * old fashioned conditionals
  * Contact me for any other requirements/ideas

CREDITS
-------

  * Plugin developed by Pablo Godel with support of ServerGrove.com
  * This plugin uses [lessphp](http://leafo.net/lessphp/), a project by Leaf Corcoran