AcmeSassDemoBundle

The small AcmeSassDemoBundle demonstrates the integration of Sass and compass functionality within Symfony2 and Assetic.

Installation

First you have to go sure that Ruby is installed on your machine. Afterwards install Sass and compass:

gem install sass
gem install compass

Put the SassDemoBundle in the src/Acme folder of your Symfony2 project.

Register this bundle in your app/AppKernel

if (in_array($this->getEnvironment(), array('dev', 'test'))) {
    $bundles[] = new Acme\DemoBundle\AcmeDemoBundle();
    $bundles[] = new Acme\SassDemoBundle\AcmeSassDemoBundle();
    $bundles[] = new Symfony\Bundle\WebProfilerBundle\WebProfilerBundle();
    $bundles[] = new Sensio\Bundle\DistributionBundle\SensioDistributionBundle();
    $bundles[] = new Sensio\Bundle\GeneratorBundle\SensioGeneratorBundle();
}

Add this bundle to your app/config/routing.yml

AcmeSassDemoBundle:
    resource: "@AcmeSassDemoBundle/Controller/"
    type:     annotation
    prefix:   /

Define the public gfx folders which are later used to read the images from and saving the generated sprite images to.

app/config/config.yml

parameters:
    # Assetic
    assetic.filter.compass.images_dir: %kernel.root_dir%/../web
    assetic.filter.compass.http_path:  

Activate the usage of the controller in your dev settings and register the needed filters.

app/config/config_dev.yml

assetic:
    debug: false
    use_controller: true # default: true
    filters:
        sass:    ~
        compass: ~

Install the new assets

php app/console assets:install web

Demo

Call this demo with /demo/sass. The resulting page is not very pretty, but after you look in the *.scss files in the Resources/assets/css folder you will find out the power of Sass and compass very soon.

Idea

The idea was taken from a discussion started in the test.ical.ly blog. The main installation part is explained in Sass, Compass and Assetic in 10 minutes by Alexandre Salomé.

Feel free for contributing to this demo. Sass and compass are more powerful than this demo currently shows.