Using the scss filter in assetic

Since there isn’t a whole lot of information on getting the scss filter to work in assetic I’ll quickly show you how I got it to work.

If you didn’t already know, assetic makes managing your css and javascript really clean and easy. The scss filter and the –watch option makes styling a site a lot more efficient and admittedly, rather enjoyable!

The biggest problem I encountered was configuring assetic with sass. Originally I was using rvm to manage ruby (i use ubuntu 11.10 btw) but there are some issues with assetic and rvm. see discussion. Instead, I removed rvm and just installed ruby-1.9.1 from source.
[php]
sudo apt-get install ruby1.9.1
[/php]
Next, install compass
[php]
sudo gem install compass
[/php]
For me the sass executable is installed in /usr/local/bin. Since this is different than the default location, my configuration looks like this:
[php]
//config.yml
# Assetic Configuration
assetic:
debug: ‘%kernel.debug%’
use_controller: false
sass: /usr/local/bin/sass
filters:
scss: ~
cssrewrite: ~
yui_css: { jar: ‘%kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar’ }
[/php]

Now in the head of your main layout just include the stylesheets you want assetic to manage.

[php]
// app/Resources/layout.html?yui_css’
‘scss/common/*.scss’
‘jquery/css/common/*.css’
‘@ApplicationSiteBundle/Resources/public/scss/*.scss’
%}

{% endstylesheets %}
{% javascripts output=’js/compiled/script.js’ filter=’?yui_js’
‘jquery/js/common/*.js’
‘@ApplicationSiteBundle/Resources/public/js/*.js’
%}

{% endjavascripts %}
[/php]

Sometimes when you add new file to assetic it fails to dump it. Just clear the cache, dump the assets, and refresh the browser.

[php]
sudo rm -rf app/cache/*
[/php]
[php]
sudo chmod 777 app/cache -R
[/php]
[php]
app/console assetic:dump
[/php]

You can make assetic refresh upon any changes in real time by using the –watch option
[php]
app/console assetic:dump –watch
[/php]

Hope this helps someone out there!
Feedback appreciated.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">