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 :
- un fichier de configuration
config.rb
; - le répertoire des sources Sass
sass
, avec 3 feuilles de styles :-
screen.scss
pour l’affichage écran ; -
print.scss
pour l’impression ; -
ie.scss
pour vos surcharges à destinations d’Internet Explorer.
-
- un répertoire
stylesheets
qui reçoit les fichiers sources compilées.
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
.
-
ce qui est le cas sur la majorité des plateformes.↩