sgLESSPlugin - 1.0.1

sgLESSPlugin plugin augments CSS with some great features: variables, nested inheritance, mixins and accessors and other neat stuff.

You are currently browsing
the website for symfony 1

Visit the Symfony2 website


« Back to the Plugins Home

Signin


Forgot your password?
Create an account

Tools

Stats

advanced search
Information Readme Releases Changelog Contribute
Show source

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