8 users Sign-in to change your status

sgLESSPlugin augments CSS with some great features: variables, nested inheritance, mixins and accessors and other neat stuff. Define variables with the following format: @mycolor: #FFFFFF; Then use it in your css like this: body { background-color: @mycolor; } Applications Backend Development

• Repository
• Download package
• Browse source

sgLESSPlugin implements LESS CSS functionality and features. It allows to define variables, mixins (for any type: class, id, tag), nested rules, arithmetic (color on color, color on number, number on number), scope, comments, importing and more things to come.

The plugin is developed by Pablo Godel with support from ServerGrove.com and uses lessphp developed by Leaf Corcoran.

This plugin will replace sgCssPlugin.

Developers

Name	Status	Email
Pablo Godel	lead	moc.liamg <<ta>> ledogp

License

Copyright (c) 2009 Pablo Godel

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Releases for sf 1.2

Releases for sf 1.1

Join this plugin team

Other releases

Release 1.0.2 - 05/08/2009

Release 1.0.1 - 03/08/2009

Release 1.0.0 - 30/07/2009

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

/* 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:

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

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

my.less

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

Output

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

  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

  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

  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:

  /* syntax */
  @varname: varvalue;
   
  /* example */
  @mycolor: #fefefe;

  Then variables are using by their name:

  body {
      background-color: @mycolor;
  }

  The resulting output will be:

  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

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, a project by Leaf Corcoran