Une Méthode de Développement de Thèmes WordPress en Utilisant Sass et Compass

() translation by (you can also view the original English article)

Dans cet article, nous allons voir comment utiliser Sass et Compass pour le développement de thèmes WordPress. Nous allons suivre les recommandations SMACSS pour nos feuilles de styles et nous allons apprendre à profiter de la puissance de Compass pour générer nos images sprites, aussi bien pour les écrans normaux que rétinas.

Notez que cet article n’est pas une introduction à Sass. Néanmoins, si vous êtes un débutant, n’hésitez pas à tenter l’expérience.

Pré-requis

Avant de vous lancer, assurez-vous d’avoir installer Sass et Compass sur votre machine. S’ils ne sont pas encore installés, suivez ces instructions:

Il existe quelques applications pour la gestion de Sass et Compass, mais je vais utiliser la ligne de commande (Terminal sur Mac, Invite de commandes sous Windows). Utilisez l’outil avec lequel vous êtes le plus à l’aise.

Mise en place du projet

Commençons par créer un dossier pour notre projet. Créez un dossier sur votre Bureau et appelez le tutplus. Créez ensuite deux sous dossiers: sass et images. Le dossier sass contiendra nos fichiers Sass qui composeront la feuille de style de notre thème: style.css.

Dans le dossier images, créez deux nouveaux dossier pour les icônes. Appelez les répertoires icons et icons@2x. Plus tard, nous utiliserons les images de ces dossiers pour créer une image sprite pour notre thème. La structure des dossiers doit maintenant être celle-ci:

Figure 1 The Folders structure — La structure des dossiers

La configuration de Compass

Nous allons utiliser l’option watch de Compass pour tenir compte des modifications faites dans le répertoire sass. Quand nous éditerons les fichiers, Sass compilera notre feuille de style. Chaque fois que nous lançons Compass, il cherche un fichier de configuration dans le répertoire courant. Ce fichier est appelé config.rb.

Pour créer ce fichier de configuration, ouvrez votre terminal/invite de commandes et rendez vous dans le dossier tutsplus de votre Bureau:

1	cd /Desktop/tutsplus/

Tapez la commande compass config config.rb. Cette commande crée un fichier de configuration pour vous. Ouvrez le fichier créé dans votre éditeur de texte favori et faites les changements suivants:

Changez css_dir = “stylesheets” pour css_dir = “/”. Compass va générer le fichier CSS directement à la racine de notre répertoire, c’est là que WordPress cherche la feuille de style style.css du thème.
Indiquez votre préférence pour l’indentation du fichier CSS généré. Ici, j’ai choisis le style expanded en changeant la ligne 12 output_style = :expanded.
Décommentez les lignes 15 et 18 en supprimant le # pour lire relative_assets = true et line_comments = false.

Sauvegardez les changements. Maintenant votre config.rb doit contenir:

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Surveiller les changements

Très bien! Maintenant que nous avons un fichier de configuration, il est temps de créer notre premier fichier Sass. Ajoutez un fichier dans le répertoire sass et appelez le style.scss. Ensuite, dans votre Terminal, rendez-vous dans le répertoire tutsplus.

Exécutez la commande compass watch. Cette commande va lancer le processus qui va continuellement surveiller les changements dans notre dossier sass. Elle va trouver notre fichier style.scss et le compiler en tant que style.css à la racine de notre répertoire tutsplus.

Notez que tous les fichiers de notre dossier sass, dont le nom ne commence pas par un underscore, sont traités et font l’objet d’une sortie dans le répertoire tutsplus. C’est exactement ce que nous voulons pour notre fichier style.scss.

Un point important à retenir: ne pas faire de changements directement dans les fichiers CSS générés, tous les changements seront perdus au moment où la compilation aura lieu.

Décomposer

Nous allons décomposer notre style.scss en composants, en utilisant la méthode définie par SMACSS (Scalable and Modular Architecture for CSS). L’auteur de SMACSS est Jonathan Snook et il a publié un livre que je vous encourage vivement à lire. Si vous êtes un membre Tuts+, vous pouvez en télécharger une copie ici.

SMACSS organise les règles CSS en cinq groupes:

Base
Layout
Module
State
Theme

Nous allons créer un dossier pour chacune de ces catégories dans notre dossier sass. Utilisez les noms: base, layouts, modules, states et themes.

Figure 2 Our SMACSS folder structure — Notre architecture de dossier SMACSS

Base

Dans le dossier base, nous allons retrouver toutes les règles qui répondent aux règles de base de SMACSS. Ces règles ne doivent s’appliquer que sur des sélecteurs d’éléments. C’est également un bon endroit pour placer les règles de reset CSS.

Compass est livré avec une version de reset basée sur celle proposée par Eric Meyer. Pour ce projet, je vais utiliser normalize.css. Téléchargez normalize.css et placez le dans le répertoire base, ensuite renommez le en _normalize.scss. Faites bien attention à changer l’extension du fichier de css vers scss.

Nous devons ensuite importer la feuille de style normalize dans notre style.scss. Pour cela, ouvrez style.scss et ajoutez:

1	// Base
2	@import "base/normalize";

Nous pouvons omettre d’écrire l’underscore et l’extension du fichier, le compilateur Sass est assez malin pour importer le fichier que l’on veut.

Layouts

Ici, nous plaçons tout ce qui est en relation avec le layout du thème. Par exemple, nous allons ajouter l’en-tête, la sidebar, le pied de page et le layout général de la page dans _header.scss, _sidebar.scss, _footer.scss et _page.scss.

Nous allons également utiliser l- comme préfixe pour nos classes:

// _header.scss
.l-main-header {
    margin: 30px;
    padding: 20px;
    font-size: 16px;
}

// _navigation.scss
.l-main-nav {
    position: relative;
}

C’est également un bon endroit pour ajouter vos règles de grilles. Vous pouvez en apprendre plus en lisant SMACSS layout rules.

Modules

Les modules sont des composants de contenu réutilisable. Par exemple, l’article d’un blog est un module car ses règles sont réutilisées sur plusieurs exemplaire du même module. Les gadgets, extraits de code et icônes sont aussi des types de modules.

Un module peut contenir des sous modules. Voici un exemple de gadget avec son sous module:

1	<li class="widget">
2	<h4 class="widget__title">Recent Posts</h4>
3	</li>

.widget {
    padding: 10px;
}

.widget__title {
    font-size: 15px;
}

Nous avons utiliser ici la convention de nomage BEM (Block Element Modifier).

States

Nous plaçons ici les règles de style qui contrôlent l’apparence des éléments en fonction de leurs états. Si vous travaillez sur un thème responsive, c’est ici que l’on place les media queries.

Créons en une immédiatement.

Nous allons créer un nouveau fichier et le sauvegarder comme _media_queries.scss dans le dossier /sass/states/. Coller ces dimensions d’écrans standards dans le fichier:

1	/*! =Media Queries
2	-------------------------------------------------------------- */
3
4	/* 956-768px */
5	@media only screen and (min-width: 768px) and (max-width: 959px) {
6
7	}
8
9	/* 767-480px */
10	@media only screen and (min-width: 480px) and (max-width: 767px) {
11
12	}
13
14	/* 479px */
15	@media only screen and (max-width: 479px) {
16
17	}

N’oublions pas d’importer notre nouveau fichier dans notre style.scss:

// Base 
@import "base/normalize";

// States 
@import "states/media_queries"

Si vous avez un menu de navigation déroulant, vous pouvez placer ici les styles qui contrôlent l’apparence de la navigation dans les états .is-open ou .is-closed, mais dans la plupart des cas, nous retrouvons ceux-ci dans le fichier de layout ou dans le fichier module.

Themes

C’est un excellent endroit pour placer les styles des plugins WordPress. Par exemple, mettre nos styles pour le plugin Contact Form 7.

Les infos du thème

Chaque fichier style.css d’un thème WordPress doit contenir des métas informations à propos du thème, comme le nom du thème, l’auteur, la version et bien d’autres encore. Nous pouvons utiliser à notre avantage les variables Sass pour changer cette information pour chaque thème que nous créons.

Commençons par créer un nouveau fichier _vars.scss et enregistrons le dans notre dossier sass. Dans ce fichier, nous allons mettre nos variables. Si vous trouvez que ce fichier devient trop grand, n’hésitez pas séparer son contenu en plusieurs petits fichiers.

Ouvrez ce nouveau fichier et entrez les variables suivantes:

// Theme Information
//--------------------------------------------//
$theme_name: "My Theme";
$theme_uri: "#";
$theme_description: "My WordPress Theme";
$theme_version: "1.0";
$theme_author: "my name";
$theme_author_uri: "#";
$theme_license: "GPL";
$theme_tags: "responsive-layout, post-formats";

Maintenant, nous devons créer un fichier qui va utiliser ces variables. Avec notre éditeur de texte, créons un nouveau fichier _theme_info.scss et sauvons le dans le dossier sass. Entrez les informations suivantes dans le fichier:

/*!

Theme Name: #{ $theme_name }
Theme URI: #{ $theme_uri }
Description: #{ $theme_description }
Version: #{ $theme_version }
Author: #{ $theme_author }
Author URI: #{ $theme_author_uri }
License: #{ $theme_license }
License URI: License.txt
Tags: #{ $theme_tags }

*/

La dernière étape consiste à importer nos nouveaux fichiers dans style.scss. Profitons en pour également importer les composants Compass:

@import "compass";

@import "vars";
@import "theme_info";

// Base 
@import "base/normalize";

// States 
@import "states/media_queries";

Maintenant, si nous ouvrons le fichier compilé style.css, il contient les information du thème WordPress avec les valeurs des variables entrées dans _vars.scss.

Helpers

Utiliser plusieures petites classes CSS générique pour déterminer l’apparence d’un élément plutôt qu’un sélecteur trop spécifique fait partie des bonnes pratiques. En suivant le principe DRY - Don’t Repeat Yourself, ne vous répétez pas - nous pouvons créer une feuille de style pour nos petites classes de helpers. Pour donner un exemple, je vais définir quelques helpers de layout et de typographie.

Créez un nouveau fichier appellé _helpers.scss et sauvez le dans le dossier sass. A nouveau, tout comme avec le fichier de variables, si votre fichier devient trop grand, pensez à le diviser en plus petits fichiers.

Ouvrez ce nouveau fichier et collez ce code:

/*! =Helpers
-------------------------------------------------------------- */

// Layout
//--------------------------------------------//
.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.hide {
    display: none;
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

.clearfix {

    &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}

.center-block {
    display: block;
    margin: 0 auto;
}

// Typography
//--------------------------------------------//
.f-normal {
    font-weight: normal;
}

.f-bold {
    font-weight: bold;
}

.f-italic {
    font-style: italic;
}

.t-strike {
    text-decoration: line-through;
}

.t-overline {
    text-decoration: overline;
}

.t-underline {
    text-decoration: underline;
}

.t-left {
    text-align: left;
}

.t-right {
    text-align: right;
}

.t-center {
    text-align: center;
}

Comme vous pouvez le constater, nous utilisons le préfixe f- pour tout ce qui est en rapport avec la police de caractère et t- pour les classes de texte. Sauvez le fichier et importez le dans style.scss:

@import "compass";

@import "vars";
@import "theme_info";

// Base 
@import "base/normalize";

// Helpers 
@import "helpers";

// States 
@import "states/media_queries";

Générer les sprites

Compass possède des méthodes très pratiques pour générer les images sprites. Nous allons placer nos icônes dans les dossiers icons and icons@2x. Dans ce dernier, nous retrouverons les mêmes icônes mais en double de taille pour les écrans rétinas.

Dans cet exemple, je vais placer deux fichiers d’icônes: checkmark.png et star.png que vous pouvez trouver dans le fichier à downloader, associé à cet article.

Pour chaque icône, nous allons générer une classe CSS séparée en utilisant une liste Sass qui contient tous les noms de fichier. Ouvrez _vars.scss et ajouter le code suivant:

// Icons
//--------------------------------------------//
// map *.png icon files
$icons_sprite: sprite-map( "icons/*.png" ); 
$icons_sprite2x: sprite-map( "icons@2x/*.png" );

// generate the icons sprites
$sprites_file: sprite-url( $icons_sprite );
$sprites2x_file: sprties-url( $icons_sprite2x );

$sprites_url: url( "images/" + sprite-path( $icons_sprite ) );
$sprites2x_url: url( "images/" + sprite-path( $icons_sprite2x ) );

// list with theme icons file names (found in icons and icons@2x folders)
$theme_icons: ( "checkmark", "star" );

Compass va trouver tous les fichiers *.png dans nos dossiers d’icônes et va générer deux images sprites dans le dossier image. Maintenant nous voulons également générer une classe CSS pour ces images.

Pour trouvez la position de l’icône à l’intérieur de l’image sprites, nous allons créer deux mixins. Pour cela, nous allons créer un nouveau fichier appelé _mixins.scss et mettre le code suivant dedans:

// Icons
//--------------------------------------------//
@mixin sprite_icon( $name, $sprite ) {
    
    @include sprite-dimensions( $sprite, $name );
    background-position: sprite-position( $sprite, $name );
}

@mixin retina_sprite_icon( $name, $sprite ) {
    
    $pos: sprite-position( $sprite, $name );
    background-position: nth( $pos, 1 ) nth( $pos, 2 ) / 2;
    @include background-size( ceil( image-width( sprite-path( $sprite ) ) / 2 ) auto );
}

Les deux mixins acceptent un nom d’icône et un “sprite map” en paramètre. Ces mixins vont permettre de déterminer la largeur, hauteur et la position de nos icônes à l’intérieur de l’image sprite générée. Le mixin retina_sprite_icon va également s’assurer de mettre la bonne taille d’arrière plan pour les icônes retinas.

Maintenant, il est temps de générer nos classes d’icône. Créez un nouveau fichier _icons.scss et sauvez le dans le dossier /sass/modules/. Ensuite copiez-y le code suivant:

/*! =Icons 
-------------------------------------------------------------- */
@if ( length( $theme_icons ) > 0 ) {

    .icon {
        display: inline-block;
        background: $sprites_url no-repeat;
    }
                
    @each $icon in $theme_icons {
        
        .#{ "icon--" + $icon } {
            
            @include sprite_icon( $icon, $icons_sprite );
        }
    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {

        .icon {
            background: $sprites2x_url;
        }

        @each $icon in $theme_icons {
            
            .#{ "icon--" + $icon } {

                @include retina_sprite_icon( $icon, $icons_sprite2x );
            }
        }
    }

}

Nous parcourons la liste des noms de nos icônes, identifiés par $theme_icons et générons les règles pour écrans rétinas et non-rétinas, grâce à nos mixins. Nous générons également une classe .icon qui sert de base pour nos icônes et ensuite une classe spécifique pour chaque icône de notre liste.

Dans cet exemple, les classes générées seront .icon--checkmark et .icon--star. Nous pouvons maintenant utiliser l'icône star de cette manière:

In this example, it will generate the .icon--checkmark and .icon--star classes. Here is an example usage of the star icon:

1	<i class="icon icon--star"></i>

Finalement, n’oublions pas d’importer nos mixins et notre module d’icône dans notre fichier styles.scss:

@import "compass";

@import "vars";
@import "mixins";
@import "theme_info";

// Base 
@import "base/normalize";

// Helpers 
@import "helpers";

// Modules
@import "modules/icons";

// States
@import "states/media_queries";

Conclusion

Sass et Compass sont deux utilitaires très puissants et qui seront des alliés pour améliorer votre développement de thèmes ou de plugins WordPress. Ce guide a pour but de vous mettre sur la bonne voie pour créer un processus de travail plus abouti lorsque vous travaillez avec WordPress.

Pour ceux qui sont curieux et qui souhaitent en savoir plus à propos des outils évoqués dans ce tutoriel, consultez les articles suivants: