[Symfony 2][Assetic] Sass, CompassFilter + Foundation Responsive Front-end Framework

Did you ever wonder how to enable 3rd party plugins (or so called “frameworks“) within the great compass toolset managed by assetic in your edgy symfony 2.1 project?

(If there is more extensive documentation available concerning assetic + CompassFilter, please stop reading on and let me know!)

If you take a look at the filter class itself (it is CompassFilter in the generic Assetic\Filter namespace), you should recognise several option values that you can use in your application wide config.yml file.

But first you have to install the framework plugin following these instructions.

After adding the framework plugin by ruby’s own package manager “gem” (hopefully replaced by composer in the near future ;-)) by typing something like

$ gem install zurb-foundation

the only thing remaining to do is to load the framework plugin by assetic. To do so, put the folloging lines to your config.yml assetic section (as you would do it when using the compass command line interface, refer to the output of

$ compass help compile

.)

The yaml file should look like this:

assetic:
    read_from: %kernel.root_dir%/web
    debug: %kernel.debug%
    use_controller: %kernel.debug%
    filters:
        compass:
            plugins: ['zurb-foundation'] 
            # load foundation                                     
            # framework as you would do by typing
            # $ compass compile --require 
            # zurb-foundation [...]
            # [ ... ]

Now you should be able to import the foundation library files by using the @import statement in your *.sass/*.scss files:

@import "foundation";

Have fun!