Symfony2でCompassを使う／環境ごとに設定する(CentOS)

やること

サーバーに最新のrubyをインストールし、compassをインストールする

参考サイト

• Rubyを最新ソースからインストール
• Compassのインストール gem install compass
• Sassも入れておく？ gem install sass

シンボリックリンクを作成

Symfony2はデフォルトで/usr/bin/compassを使うようです

ln -s /usr/local/bin/ruby /usr/bin/ruby
ln -s /usr/local/bin/compass /usr/bin/compass

Sass

ln -s /usr/local/bin/sass /usr/bin/sass

config.ymlを編集

filtersに追加する

config.yml

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        ['FooBarBundle' ]
    #java: /usr/bin/java
    filters:
        cssrewrite: ~
#        sass:       ~
        compass:    ~

ディレクトリを作る

こんなディレクトリ構造にするか

/src/Foo/FoobarBundle/Resources/assets/sass/main.scss

publicにsassディレクトリを作成し、.htaccessなどでアクセスを禁止するのもいいかもしれない。私はこちら。

/src/Foo/FooBarBundle/Resources/public/sass/main.scss

.htaccess

<IfModule mod_authz_core.c>
    Require all denied
</IfModule>
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all
</IfModule>

テンプレートで読み込む

こんな感じ

layout.html.twig

{% stylesheets filter="compass" "@FooBarBundle/Resources/public/sass/main.scss" %}
    <link href="{{ asset_url }}" media="screen" rel="stylesheet" type="text/css"/>
{% endstylesheets %}

prodモードの時のみCSSを圧縮して出力する

次のそれぞれのymlファイルにcompass:styleの設定を加える。styleはコマンドラインの--output-styleパラメータに対応している。

config_prod.yml

# 本番環境ではCSSを圧縮する
assetic:
    filters:
        compass:
            style: compressed

config_dev.yml

# 開発環境ではCSSを圧縮しない
assetic:
    filters:
        compass:
            style: expanded

参考サイト

• Sass, Compass, and Assetic in 10 minutes