Quelles sont les lunettes de prescription non http://belgiquepharmacie.be/ Unie de liberté de santé oxford

Sass et Compass éveillent de plus en plus la curiosité des intégrateurs Web et développeurs front-end français. Malheureusement je ne peux que constater une certaine réticence de leur part à sauter le pas.
La faute en incombe généralement à une frayeur démesurée de la ligne de commande et, il est vrai, à un manque de ressources francophones qui expliquent comment intégrer l’outil dans son processus métier.

Je vous propose ici la méthode de travail générique que j’utilise depuis maintenant 2 ans dans mon environnement professionnel. Je précise bien générique parce que certains projetss peuvent imposer une organisation différente.

Post-it Marilyn par Peter Hellberg

Crédits : Post-it Marilyn par Peter Hellberg sous licence CC BY-SA 2.0

Initialiser un nouveau projet Compass

Mon projet est généralement contenu dans un projet plus conséquent, comme par exemple un thème Drupal pour lequel j’ai déjà créé son répertoire. Il me suffit ainsi d’initialiser un nouveau projet Compass, chose aisée grâce à sa commande init :

$ compass init --prepare --sass-dir sass --css-dir css --images-dir img --relative-assets
directory css/ 
directory sass/ 
   create config.rb

Puisque je ne souhaite pas que Compass me génère de feuilles de styles par défaut, j’utilise ici l’option --prepare qui limitera son action à créer :

  • le fichier de configuration du projet config.rb ;
  • le répertoires accueillant les sources SCSS nommé ici sass ;
  • le dossier de destination des feuilles de styles générées css.

Cela fait, j’édite le fichier de configuration pour paramétrer les 2 environnements de déployement (development et production, sachant que development est celui par défaut) et pour empêcher Compass d’ajouter un éventuel cache buster :

if environment == :production
  output_style = :compressed
else
  output_style = :expanded
  sass_options = { :debug_info => true }
end

# Désactiver l'ajout du cache buster sur les images appelées via la fonction image-url().
asset_cache_buster :none

Note :
La ligne qui contient :debug_info me permet d’utiliser le plugin pour Firefox FireSass.

Ok, mon projet Compass est presque prêt. Il ne me manque plus qu’à créer quelques répertoires et fichiers que j’utilise habituellement :

$ mkdir -p sass/partials/{reset,ui}
$ touch sass/{style,reset,partials/_{base,reset,ui}}.scss

Mon arborescence finale :

$ tree -F
.
├── config.rb
├── css/
└── sass/
    ├── partials/
    │   ├── _base.scss
    │   ├── _reset.scss
    │   ├── _ui.scss
    │   ├── reset/
    │   └── ui/
    ├── reset.scss
    └── style.scss

Méthodologie de travail avec Compass

Après toute modification qui nécessite une vérification du résultat de ma part1, je lance une compilation des sources Sass par une simple commande :

$ compass compile

Comme aucun fichier de configuration n’est précisé, la commande compile lit le fichier de configuration config.rb (ou compass.rb).

Lorsque mon fichier de configuration n’est pas standard, je précise son emplacement avec l’argument -c : $ compass compile -c sass/theme.rb

Il est aussi possible de ne compiler qu’une seule feuille de styles, en précisant simplement son équivalent Sass :

$ compass compile sass/styles.scss

Cette opération pouvant être répétitive, Compass offre une commande watch qui possède les même options que sa sœur compile mais qui se charge de surveiller mon projet et lancer la compilation dès que cela est nécessaire :

$ compass watch

Un petit Ctrl+C stoppera la surveillance.

Partager son projet Compass

Jusqu’ici je ne travaillai qu’en local. Il me faut maintenant pousser mon travail sur le dépôt centralisé pour permettre à mes collègues d’en bénéficier.
Oui, je pourrai pousser le travail en l’état, mais non je ne le fait pas. Puisque ces mêmes ressources sont destinée à être déployées sur le serveur de production je relance une compilation en précisant l’environnement production :

$ compass compile -e production --force

L’argument --force m’assure que toutes les ressources seront bien compilées.

J’obtiens ainsi des feuilles de styles compressées, idéales pour les webperf et décourageantes pour la personne qui souhaiterait directement les éditer en se cognant du projet Compass parce que ça l’emmerde de s’y mettre2 :)

Webperf un jour, webperf toujours !

Dernière opération avant de pousser mon travail : j’optimise les sprites modifiés depuis la dernière fois. Évoluant sous MacOSX, j’utilise l’excellent ImageOptim. Sous Linux vous pouvez vous tourner vers son équivalent Trimage et PNGGauntlet sous Windows.

Au secours, j’ai un conflit !

Après un svn up ou git pull il peut arriver un conflit . Il y a 98% de chances pour qu’il porte sur un fichier généré par Compass, à savoir une feuille de styles ou une image de sprite.
Pas de problème, j’accepte la version entrante ou supprime ma version locale. Je peux ainsi visualiser dans un navigateur la dernière version récupérée et dans tous les cas il me suffit de lancer une compilation pour que mon travail soit à nouveau pris en compte (puisque les modifications entrantes des sources Sass ont été correctement fusionnées).

En résumé

Finalement, une fois le projet initialisé, travailler avec Compass revient à exécuter un ridicule jeux de commandes :

$ compass watch
CTRL+C
$ compass compile -e production --force
$ open -a "ImageOptim" img/*.png

Rien de sorcier, n’est-ce pas ? :)

Bonus de Compass

Il peut arriver que je souhaite supprimer tout fichier généré par Compass : fichiers de cache, sprites et feuilles de styles. Rien de plus simple à l’aide de la commande clean :

$ compass clean

Parce que les statistiques sont toujours révélatrices de points forts ou faiblesses d’un projet :

$ compass stats

Notes :
N’oubliez pas de préciser le fichier de configuration s’il n’est pas standard.


Notes

  1. sans déconner, vous avez vraiment besoin d’une solution comme LiveReload ? Vous avez si peu confiance en vos compétences ? :-/
    Sans parler du fait que c’est un coup à faire ramer votre machine lorsque le projet à rafraîchir est une page complexe d’un CMS… 

  2. mes collègues de Clever Age Lyon sont géniaux : aucun n’a émit d’objection quand je leur ai proposé d’utiliser Compass dans leurs projets. Au contraire, ils ont été friands de nouveauté \o/ 

publicité (chargement)

10 réponses pour Compass au quotidien

  1. Delkia dit :

    Merci pour cette mise en bouche !

  2. Vincent dit :

    Je rebondis vite sur cette note de bas de page, mais je prendrais le temps de tout lire, ça semble très intéressant.

    Tu écris donc : « sans déconner, vous avez vraiment besoin d’une solution comme LiveReload ? Vous avez si peu confiance en vos compétences ? :-/ »

    Je pense que tu confonds le métier de développeur et le métier d’intégrateur là (de mon point de vue la frontière est très nette, mais peut-être que du tien ça l’est moins vu que tu sais faire les deux). Ce n’est pas une question de confiance (ou que sais-je encore) mais de ne pas travailler en aveugle, tout simplement. Pouvoir s’assurer en permanence que le résultat est le plus conforme possible à la maquette, ça n’a rien d’évident.

    J’alterne constamment entre mon éditeur et mon navigateur, quelque soit l’opération que je suis en train de réaliser. À raison de centaines de fois par heure (oui), c’est crucial de pouvoir compiler de manière transparente.

    Aucun impact encore sur le CMS puisque de toute manière les maquettes sont statiques à ce niveau.

  3. piouPiouM dit :

    @Vincent il est vrai que pour moi la frontière entre intégrateur full static et intégrateur dans une solution finale tel qu’un CMS est bien mince (dans une solution finale tu es obligé de tordre à minima l’intégration statique, donc…). Je conçois tout à fait la démarche de vérifier le résultat à la moindre petite modification, et pour cause : j’en faisais de même.

    Mais après des années de travail de la sorte je me suis aperçu que finalement je ne me trompais que peu de fois (par opposition à chaque fois hein :p) et que finalement, peut-être était-il temps d’avoir plus confiance en mon expérience. Désormais je vérifie toujours régulièrement l’intégration (vive les 2 écrans) mais je ne le fais plus à chaque enregistrement de fichier ; uniquement lorsque j’ai fini d’intégrer une portion d’une entité.

  4. Jérôme C. dit :

    Bonjour, cet article est vraiment très intéressent, j’ai juste une question : Est-il possible de travailler avec sass/compass directement sur un serveur de préprod, sans passer par du dev en local en fait. Si oui, j’imagine que la manip est la même, install ruby sur serveur en ssh et voila ?

    Pour info, la ligne de commande pour ImageOptim est vraiment utile, finit les drag&drop.

  5. piouPiouM dit :

    Bonjour Jérôme, Il est tout à fait possible de faire tourner sass/compass sur un serveur mais je ne suis absolument pas fan de la solution. En effet cela implique :

    • que nous ne sommes pas à l’abris d’une erreur de compilation suite à une typo qui a pour effet immédiat de supprimer tout style (la CSS contiendra l’erreur et non les styles compilées)
    • d’optimiser côté serveur les sprites générés
    • de surveiller le watcher pour le relancer si ce dernier vient à planter (à moins d’utiliser un hook post-receive qui lancera la compilation, si votre projet est versionné).

    Après bien évidemment tout dépend de vos méthodologies de travail et de déploiement sur différents environnements (recette, pré-production, production par exemple).

  6. Jérôme C. dit :

    Ok merci, en effet je fonctionne souvent en local, commit pour le serveur de preprod validation et production comme ton exemple en fait.

    Je n’ai pas encore regardé l’optimisation de sprites, jusqu’à présent j’utilise des outils qui font plus ou moins ce que je cherche mais je n’ai pas vraiment été satisfait du résultat, c’est la prochaine étape.

  7. baboum dit :

    Bonnjour,

    est il possible de passer en sass sur un ancien projet en évitant que compass efface les anciens style sur le fichier css ?

    Merci par avance pour l’aide.

  8. piouPiouM dit :

    @baboum 2 possibilités :

    1. soit vous renommez le fichier .css en .scss et Compass générera un .css identique (c’est ici l’avantage de la syntaxe SCSS qui est compatible CSS, contrairement à la syntaxe Sass).
    2. soit vous ne déléguez pas la gestion de cette feuille de style à Compass. Dans ce cas, déposez le fichier directement dans le répertoire de destination des feuilles de style.
  9. Gaël dit :

    Article très intéressant, tout comme le support de votre atelier !!

    Intégrateur de mon état, je suis de plus en plus attiré par cette solution, mais ce qui me retient pour le moment relève plutôt de ma gestion du temps : j’imagine que le temps d’apprentissage est relativement conséquent avec toutes ces fonctionnalités à explorer !

    Des articles comme les vôtres me préparent très bien à sauter le pas, merci !!

  10. pelemele dit :

    Ouf ! J’ai compris ! Merci beaucoup pour ce billet qui permet de défricher le bestiau et surtout de le dédiaboliser :)

Ajouter un commentaire


Syndication

Réseaux sociaux