Contactez-nous
Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81
plv)
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
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