Comment utiliser Compass/Sass avec Symfony2

symfony-compassUtiliser Compass sur un projet Symfony2 est un jeu d’enfant. Il suffit d’un petit chouilla de configuration. Après ça Symfony se chargera de construire à la volée vos CSS. Pour ce faire nous allons utiliser un outil intégré au framework, nommé Assetic. Comme son nom l’indique je vous le donne mille cet outil à pour role la gestion des assets.

Mais qu’est ce qu’un asset ?
Et bien en programmation web, un asset est une ressource qui est directement utilisé par le navigateur web, tels que les images, les feuilles de style ou les fichiers javascripts.
En fait Assectic utilise un système de filtre qui permet d’executer une routine à l’appel d’une ressource.

Nous allons considérer ici que vous savez installer et utiliser Sass et Compass. Si ce n’est pas le cas je vous invite à consulter mon tuto sur Compass

Passons à la configuration, …

Il faut commencer à dire à Symfony où se trouve ruby, sass et compass. Ceci étant directement lié à à la machine sur laquelle nous sommes, je préfère configurer des variables pour renseigner chaque path que nous avons besoin.

Editons le fichier app/config/parameters.yml

    sass.bin: /var/lib/gems/1.9/bin/sass  # mettre ici le chemin ou est installé sass
    compass.bin: /var/lib/gems/1.9/bin/compass # mettre ici le chemin ou est installé compass
    ruby.bin: /usr/bin/ruby # mettre ici le chemin ou est installé ruby

Il va falloir activer les filtres dans la configuration de votre application app/config/config.yml

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        ['WebsiteBundle']
    ruby: %ruby.bin%
    filters:
        cssrewrite: ~
        sass:
            bin: %sass.bin%
        compass:
            bin: %compass.bin%

Dans votre layout, placer votre filtre de cette manière :

    {% stylesheets filter="compass" output="css/all.css"
          "@WebsiteBundle/Resources/assets/sass/*.scss" %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}

Ainsi, le chemin /Resources/assets/sass de votre Bundle est celui où devra se trouver vos fichiers sass.
La règle *.scss permet de boucler sur tous les fichiers.
Mais vous pouvez les sélectionner manuellement :

    {% stylesheets filters="compass" 
        "@WebsiteBundle/Resources/assets/css/screen.scss" 
        "@WebsiteBundle/Resources/assets/css/print.scss"         
        "@WebsiteBundle/Resources/assets/css/ie.scss" %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}

Il va de soit que compass ne sera actif que pour l’environnement de développement. Pour la prod il vous faudra générer le css en lançant cette commande :

./app/console assetic:dump --env=prod --no-debug

Articles similaires :

Mots-clefs : , , ,

2 commentaires sur “Comment utiliser Compass/Sass avec Symfony2”

  1. Lulu dit :

    Bonjour,
    Merci pour ton tuto dont je me sers actuellement.
    J’ai des interrogations quant à la prod. Tu dis que Compass ne sera pas actif en prod. Pourtant on le définit dans assetic dans le config.xml global et pas dans confi_dev.xml ?
    Je ne comprends pas bien comment le css provenant de fichiers sass se génère quand on fait ./app/console assetic:dump –env=prod –no-debug si compass n’est pas utilisé en prod. Peux-tu m’éclairer sur ce point ?

    Merci !

    • bugz dit :

      C’est peut-être pas très clair, ce que je veux dire par là, c’est que les assets sont générés au moment du déploiement, alors qu’en dev, à chaque requête, assetic vérifie si le fichier sass a été modifié regénère le CSS si nécessaire.
      La commande ./app/console assetic:dump –env=prod –no-debug permet de forcer la génération des assets. Il ne suffit donc pas de remplacer les fichiers sass pour voir les modifs.

Laisser une réponse