Update: The CSS plugin for symfony has been replaced by a new plugin called sgLESSPlugin. Read this post for more information.

One of the things symfony can improve is its appeal for designers. While the framework provides a number goodies for the developer, our designer (me), decided I want some goodies for designers as well. We started a plugin project that allows us to dynamically parse CSS. It currently allows us to define variables and use then through the CSS, but as we move forward, and believe me we will, expect to see things like parsing of nested styles, browser based conditionals, old fashioned conditionals, minimize, fancy includes, etc… This is a big project that will make handling of css files easier and cleaner and we hope that some people will also volunteer to help build it.

sgCSSPlugin Getting started

UPDATE: The CSS plugin for symfony has been replaced by a new plugin called sgLESSPlugin. Read this post for more information.

To get started first install the sgCSSPlugin and configure your project according to the instructions located at http://www.symfony-project.org/plugins/sgCssPlugin. Once installed, create a file in your /web/css with the extension ending in .sgcss . In our case we decided to create main.sgcss

What sgCSSPlugin will do is parse main.sgcss and dynamically generate the output when accessed as /sgcss/main.css, so in your view.yml, all you have to do is call:


stylesheets:    [/css/main.css]

Using Variables

Defining variables is easy. To set a variable:


@purple #5d2458;
@font Verdana, Geneva, sans-serif;
@width 960px;

Then to call the variables all you need to do is:


.myclass {
background-color: @purple;
font-family: @font;
width: @width;
}

The above code will output:


.myclass {
background-color: #5d2458;
font-family: Verdana, Geneva, sans-serif;
width: 960px;
}

That’s it for now. We invite anyone to collaborate and expand on this project. Feedback is welcome.