Navigation

Contactez-nous

Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

Par Philippe Le Van (twitter accountplv) Dernière mise à jour : 05 May 2012

Sass, Compass, Symfony2 et assetic

Introduction

Commençons par un peu de vocabulaire :

  • Sass : C'est un langage qui étend les CSS en ajoutant des variables, des fonctions,.. Allez voir un avant goût sur leur site : http://sass-lang.com/
  • Compass : C'est une librairie de composants Sass pour des besoins récurrents dans les CSS (typiquement un inline-block multibrowser, des border-radius multibrowser,...). Allez voir leur site : http://compass-style.org/
  • Symfony2 : un framework PHP : http://symfony.com
  • Assetic : une librairie pour le framework Symfony2 gérant la compilation automatique des assets (css, sass, js, less,...) dans un projet symfony2 : http://symfony.com/doc/current/cookbook/assetic/index.html

Les librairies Sass et Compass sont développées en ruby

Installation de sass et compass sur un linux

L'installation suit 4 étapes :

  • L'installation de la libyaml
  • L'installation de ruby (et gem)
  • L'installation de sass et compass

Installation de la libyaml

Télécharger la lib à l'adresse : http://pyyaml.org/wiki/LibYAML

wget http://pyyaml.org/download/libyaml/yaml-0.1.4.tar.gz
tar zxvf yaml-0.1.4.tar.gz
cd yaml-0.1.4
./configure
make
make install

Installation de ruby

A partir des sources (disponibles sur le site http://www.ruby-lang.org)

(note certaines distributions linux auront un ruby à jour avec leur système de package. Ici je pars des sources parce que sur mon centOs, ça n'est pas le cas)

wget http://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.3-p194.tar.gz
tar zxvf ruby-1.9.3-p194.tar.gz
./configure
make
make install

Installation de sass et compass

Il suffit d'installer compass. Sass sera installé automatiquement parce qu'il est nécessaire à compass.

gem install compass

Configuration de Assetic dans Symfony2 pour compass

Je pars d'une distribution symfony2 standard.

La librairie assetic est déjà dans le deps. On a quelques confs à modifier pour que ça fonctionne

Dans config.yml

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

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~
        sass:
            bin: /usr/local/bin/sass
        compass:
            bin: /usr/local/bin/compass

dans routing_dev.yml

_assetic:
    resource: .
    type:     assetic

dans le head de votre ::base.html.twig

Je considère que mes fichiers sass sont dans le bundle AppSiteBundle dans le répertoire Resources/assets/sass/

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

Quand sont générées les CSS ?

En développement: 2 méthodes

2 méthodes sont possibles :

  • soit vous ne générez jamais les fichiers temporaires. Les fichiers sass sont recompilés à la volé à chaque fois que vous regardez une page
  • Soit vous utilisez le système "watch" de sass qui permet de régénérer les fichiers temporaires css dès qu'un fichier sass est modifié. Dans ce cas il faut lance en ligne de commande :
./app/console assetic:dump --watch

En production

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

Conclusion

N'hésitez pas à compléter ce tutoriel dans les commentaires

Commentaires

Ajouter un commentaire
Paramètres de compass
@error500 
http://compass-style.org/help/documentation/configuration-reference/
Dépendances
@error500 
Les paramètres http_path et images_dir servent à déclarer la racine de ton projet et à déclarer le chemin vers tes images dont compass se sert pour générer des sprites. 

Assetic ne gère pas les dépendances des fichiers sass.
En cas de problème regardez du côté de CompassElephantBundle
un truc qui m'échappe
Hello,
il y a un (ou même deux) trucs qui m'échappent :


1 :
A quoi te servent les parmètres :
parameters:
    assetic.filter.compass.images_dir: %kernel.root_dir%/../web/img
    assetic.filter.compass.http_path:  /img


2 :
Qu'est-ce que la déclaration :
_assetic:
    resource: .
    type:     assetic