Using compass/sass with Symfony 2

Question

I've been googling around for an answer to this but haven't found exactly what I'm looking for.

I'm dipping my toes in the water of the Symfony framework having been using CodeIgniter for a few years. I like the "bundle" approach so far except that I'm having a few issues getting my head around how to deal with assets, specifically css files.

I am used to using the Compass framework and typically will set up a directory structure using partials that compile down to one main stylesheet. However, because my Symfony project is split into bundles I would like (and probably should) keep the css for each bundle within the bundle and only have global template-like stuff in the main "web" directory. My problem is this...

If I have a compass project setup in my "web" directory, how can I include partials from my individual bundles?

I thought about having separate compass projects for each bundle that I create but how would I then combine them all into one, compressed file? Is that something I should use Assetic for? Is that frankly organisational overkill?

Any suggestions from others who have found themselves in a similar situation would be gratefully received!

Solution 1

I ended up making a directory structure for my compass project in the main app/Resources folder. I've been able to create "bundle-specific" directories if I need them and then use Compass to compile the whole lot down to one main css file (also stored in app/Resources/public. I then use Assetic to "publish" (or whatever it does) that file into my web root using the normal method of including stylesheets into my base twig templates.

Solution 2

This looks like a job for Assetic and its Sass filter.

You can list all your sass files in main template directory and assetic will do the compressing for you.

Looks something like this (taken from link below):

{% stylesheets filters="compass"
    "@AlomMainBundle/Resources/assets/css/main.sass"
    "@AlomMainBundle/Resources/assets/css/header.sass"
    "@AlomMainBundle/Resources/assets/css/footer.sass"
%}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

A good explanation I've found on the internet is here: http://alexandre-salome.fr/blog/Sass-Compass-Assetic-In-Ten-Minutes