Prise en main de Compass

Compass est un framework CSS3 pour Sass. Il fournit une collection de mixins qui rendent l’utilisation de CSS3 facile d’accès. Malheureusement, j’entends fréquemment que sa dépendance à Ruby et son maniement en ligne de commande est un frein à son adoption.
Démystifions sans plus tarder cette affirmation.

Installation

Compass peut être installé sur toute machine avec Ruby d’installé1.
Assurez vous d’avoir un environnement ruby à jour, puis installez Compass :

$ gem update --system
$ gem install compass

Compass et ses dépendances (comme Sass) s’installeront automatiquement.
Peut-être devrez-vous préfixer les commandes de sudo si vous ne possédez pas de gestionnaire de versions de ruby

Création d’un nouveau projet

Placez vous dans le répertoire parent de votre futur projet et initialisez ce dernier en une simple commande :

$ cd /var/www/
$ compass create mon_projet

Ceci fait, Compass va générer un ensemble de répertoires et fichiers :

L’outil de création de projet conclu avec un petit howto pour un démarrage rapide :

directory mon_projet/ 
directory mon_projet/sass/ 
directory mon_projet/stylesheets/ 
   create mon_projet/config.rb 
   create mon_projet/sass/screen.scss 
   create mon_projet/sass/print.scss 
   create mon_projet/sass/ie.scss 
   create mon_projet/stylesheets/ie.css 
   create mon_projet/stylesheets/print.css 
   create mon_projet/stylesheets/screen.css 

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/


To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>

Si vous devez travailler dans un projet existant, vous pouvez tout à fait vous contenter de créer un fichier config.rb avec la configuration adéquate.

Compilation du projet

L’apprentissage de Compass vous rebute parce qu’il fonctionne en ligne de commande ? Voici de quoi relayer votre phobie aux oubliettes : une fois à la racine de votre projet, lancez simplement la commande :

$ compass watch

Désormais, toute modification d’un fichier Sass lancera automatiquement la génération des feuilles de styles CSS. Pas trop difficile, n’est-ce pas ? ;-)
Pour stopper la surveillance du projet, tapez Ctrl+C.

Si vous souhaitez compiler ponctuellement le projet Compass, remplacez simplement l’action watch par compile.

  1. ce qui est le cas sur la majorité des plateformes.↩