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

Compass attire — à juste titre — un nombre croissant d’intégrateurs WordPress et une problématique s’impose à chaque création de thème : comment organiser mes fichiers Sass tout en respectant les contraintes du moteur de blog ?

En effet, un thème WordPress requiert à sa racine un fichier style.css muni d’un bloc de commentaire en en-tête pour stocker ses métadonnées. Rien de bien compliqué jusque là. Imaginons maintenant que vous souhaitez aussi générer d’autres feuilles de styles dans sous-répertoire css/.

Il existe des solutions mais elles sont complexes, lorsqu’une connaissance du fonctionnement de Compass suffit.

Initialiser un thème WordPress à la sauce Compass

Dans un premier temps, générons l’arborescence du thème (avec la console, c’est tellement plus rapide :p) :

$ cd votre-racine-wordpress/wp-content/themes
$ mkdir -p your-theme/{img,sass/{css,partials}}
$ cd your-theme
$ touch index.php config.rb sass/{style,partials/_{base,grid,typography},css/sub-section}.scss

L’arborescence obtenue :

your-theme/
├── img/
├── sass/
│   ├── css/
│   │   └── sub-section.scss
│   ├── partials/
│   │   ├── _base.scss
│   │   ├── _grid.scss
│   │   └── _typography.scss
│   └── style.scss
├── config.rb
└── index.php

Oui, tous les fichiers Sass sont regroupés au sein du répertoire éponyme et aucun fichier style.scss n’est présent à la racine du thème.

Conserver un commentaire après compilation Sass

Renseignez les métadonnées de votre thème dans le fichier sass/style.scss, en veillant à commencer le bloc de commentaire par la chaîne /*! :

/*!
Theme Name: Your Theme
Author: your team
etc…
*/

Le marqueur /*! indique à Sass (et non Compass) de conserver le bloc de commentaire dans la feuille de styles générée, impeccable :)

Note :
Le commentaire est également conservé lorsque l’environnement Compass est défini à production. Aussi, le marqueur /*! est remplacé par une ouverture de commentaire normale /*.

Configurer le projet Compass

Le travail le plus important reste à faire : indiquer à Compass où trouver les fichiers sources Sass et la destination des fichiers compilés. Habituellement, en tant qu’utilisateur de Sass ou Compass, on désigne un répertoire de destination pour réceptionner toutes les feuilles de styles présentent à la racine du dossier des sources Sass. Par exemple, tous les fichiers non préfixés par un _ situés à la racine de sass/ seront générés dans le dossier css/.
Dans le cas présent, nous souhaiterions obtenir un fichier style.css à la racine du thème et un fichier sub-section.css dans le répertoire css/, donc à deux emplacements. Soit l’arborescence :

your-theme/
├── css/
│   └── sub-section.css
├── img/
├── sass/
│   ├── partials/
│   │   ├── _base.scss
│   │   ├── _grid.scss
│   │   └── _typography.scss
│   └── style.scss
├── config.rb
├── index.php
└── style.css

Deux subtilités du fonctionnement de Compass vont aider à résoudre aisément ce petit problème :

  1. tout fichier non préfixé par un tiret bas _ sera généré, quelque-soit son niveau de profondeur. Son arborescence sera elle aussi créée.
  2. un chemin dans les options de configuration du projet peut être vide (ou égal à .) pour indiquer le chemin courant.

Ainsi, éditez le fichier config.rb comme ci-dessous pour préciser une cible vide pour l’option css_dir :

sass_dir   = 'sass'
css_dir    = ''
images_dir = 'img'
relative_assets = true

Note :
Je vous invite à consulter le billet Compass au quotidien pour découvrir des options de configuration complémentaires.

Compiler les styles Sass du thème WordPress

Le thème est désormais correctement initialisé, vous pouvez le compiler en vous positionnant au préalable dans le répertoire de votre thème :

$ cd your-theme
$ compass compile
directory css/ 
   create css/sub-section.css 
   create style.css

Comme prévu, Compass a bien créé les fichiers css/sub-section.css et style.css \o/

Quid du chemin des images ?

N’ayez aucune inquiétude, Compass s’assurera du bon chemin d’accès des images, à condition que vous ayez bien configuré le chemin des images via l’option images_dir.

publicité (chargement)

5 réponses pour Utiliser Compass dans un thème WordPress, la bonne méthode

  1. masseuro dit :

    Mais tu sais que je t’aime toi j’ai justement besoin de mettre un compass sur un wordpress pas plus tard que demain !

  2. patpro dit :

    Outch. Quand mon client RSS m’a remonté ce nouvel article, y’a eu comme un nuage de poussière qui a volé sur mon écran :) Ça fait plaisir de voir que le blog n’est pas mort ;p

  3. Nico Mollet dit :

    Je ne doute pas des qualités de Sass&Compass, mais comparé à Less, la compilation reste un point noir.

    Dans ton précédent billet tu dis “vous n’avez pas confiance en vous, vous avez vraiment besoin de rafraichir vos pages sans arrêt ?” Je travaille de cette manière et devoir recompiler sans arrêt, et à la mano, est bloquant.

    Less (Twitter Bootstrap), a en natif un live reload (less.js) et le temps de compilation est rapide. Tant que je n’aurais pas trouvé d’équivalent sur Sass/Compass, je vais avoir du mal.

  4. piouPiouM dit :

    Le point noir de Less est justement qu’il requiert soit une installation lourde côté serveur (node.js n’est pas un poids plume vu ses dépendances), soit un parseur JavaScript qui est injecté le temps de l’intégration. Ce dernier point est rédhibitoire pour ma part. Dès qu’un fix est requis il faut ré-intégrer le parseur. Non merci.

    La compilation de Sass & Compass est transparente grâce à la surveillance de projet (commandes sass --watch ou compass watch) qui va re-compiler le projet à la moindre modification. Cette surveillance peut d’ailleurs être couplée à une solution telle que Live Reload.

    En ce qui concerne les temps de compilation, d’énormes progrès ont été réalisé par la communauté de Compass. La création de sprites se fait désormais lorsque c’est nécessaire et non plus à chaque compilation d’une feuille Sass comme c’était le cas lorsque Compass s’appuyait sur le plugin Lemonade. Par exemple c’est quasiment instantané sur un projet en cours qui compte 49 fichiers Sass et génère 5 images sprites.

  5. Checking-web dit :

    Merci pour cet article, je dois mettre un compass dans un wordpress et je cherchais justement quelques conseils. Cet article m’a été bien utile!

Ajouter un commentaire


Syndication

Réseaux sociaux