Introduction à Sass pour les nouveaux concepteurs de thèmes WordPress

En tant que nouveau concepteur de thèmes WordPress, vous apprenez rapidement les défis liés à la maintenance de longs fichiers CSS tout en les gardant organisés, évolutifs et lisibles.

De nombreux concepteurs et développeurs front-end, y compris ceux de WPBeginner, recommandent l'utilisation d'un langage de préprocesseur CSS comme Sass ou LESS pour faciliter le travail. Mais qu'est-ce que ces préprocesseurs ? Et comment commencer avec eux ?

Cet article est une introduction à Sass pour les nouveaux concepteurs de thèmes WordPress. Nous vous expliquerons ce qu'est un préprocesseur CSS, pourquoi vous en avez besoin, et comment les installer et commencer à les utiliser immédiatement.

Qu'est-ce que Sass (Syntactically Awesome Stylesheet) ?

Le CSS que nous utilisons a été conçu pour être un langage de feuille de style facile à utiliser. Cependant, le web a évolué, et les concepteurs ont donc besoin d'un langage de feuille de style qui leur permette d'en faire plus avec moins d'efforts et de temps.

Les langages de préprocesseur CSS, comme Sass, vous permettent d'utiliser des fonctionnalités qui ne sont pas actuellement disponibles en CSS, telles que les variables, les opérateurs mathématiques de base, l'imbrication, les mixins, etc.

C'est très similaire à PHP, qui est un langage de préprocesseur qui exécute un script sur le serveur et génère une sortie HTML. De même, Sass pré-traite les fichiers .scss pour générer des fichiers CSS qui peuvent être utilisés par les navigateurs.

Depuis la version 3.8, les styles de la zone d'administration de WordPress ont été portés pour utiliser Sass pour le développement. De nombreuses boutiques de thèmes WordPress et développeurs utilisent déjà Sass pour accélérer leur processus de développement.

Premiers pas avec Sass pour le développement de thèmes WordPress

La plupart des concepteurs de thèmes utilisent un environnement de développement local pour travailler sur leurs thèmes avant de les déployer sur un environnement de staging ou un serveur en direct. Comme Sass est un langage de préprocesseur, vous devrez l'installer sur votre environnement de développement local.

La première chose à faire est d'installer Sass. Il peut être utilisé comme un outil en ligne de commande, mais il existe également de bonnes applications graphiques disponibles pour Sass. Nous recommandons d'utiliser Koala, qui est une application open source gratuite disponible pour Mac, Windows et Linux.

Pour les besoins de cet article, vous devrez créer un thème vierge. Créez simplement un nouveau dossier dans /wp-content/themes/. Vous pouvez le nommer « mytheme » ou tout autre nom que vous souhaitez. À l'intérieur de votre dossier de thème vierge, créez un autre dossier et nommez-le stylesheets.

Dans le dossier stylesheets, vous devez créer un fichier style.scss à l'aide d'un éditeur de texte comme le Bloc-notes.

Vous devez maintenant ouvrir Koala et cliquer sur l'icône plus pour ajouter un nouveau projet. Ensuite, localisez le répertoire de votre thème et ajoutez-le comme projet. Vous remarquerez que Koala trouvera automatiquement le fichier Sass dans votre répertoire de feuilles de style et l'affichera.

Faites un clic droit sur votre fichier Sass et sélectionnez l'option Définir le chemin de sortie. Sélectionnez maintenant la racine de votre répertoire de thème, par exemple, /wp-content/themes/mytheme/ et appuyez sur Entrée. Koala générera maintenant un fichier de sortie CSS dans votre répertoire de thème.

Pour tester cela, vous devez ouvrir votre fichier Sass style.scss dans un éditeur de texte comme le Bloc-notes et ajouter ce code :

$fonts: arial, verdana, sans-serif; 
body { 
font-family:$fonts;
} 

Vous devez maintenant enregistrer vos modifications et revenir à Koala. Faites un clic droit sur votre fichier Sass, et la barre latérale glissera sur la droite. Pour compiler votre fichier Sass, cliquez simplement sur le bouton ‘Compiler’.

Vous pouvez voir les résultats en ouvrant le fichier style.css dans votre répertoire de thème, et il contiendra le CSS traité comme ceci :

body {
  font-family: arial, verdana, sans-serif; }

Notez que nous avons défini une variable $fonts dans notre fichier Sass. Maintenant, chaque fois que nous aurons besoin d'ajouter une famille de polices, nous n'aurons pas besoin de retaper les noms de toutes les polices. Nous pouvons simplement utiliser $fonts.

Quels autres superpouvoirs Sass apporte au CSS ?

Sass est incroyablement puissant, rétrocompatible et super facile à apprendre. Comme nous l'avons mentionné précédemment, vous pouvez créer des variables, des imbrications, des mixins, des importations, des partiels, des opérateurs mathématiques et logiques, etc.

Maintenant, nous allons vous montrer quelques exemples, et vous pouvez les essayer sur votre thème WordPress.

Gestion de plusieurs feuilles de style

Un problème courant que vous rencontrerez en tant que concepteur de thèmes WordPress est celui des grandes feuilles de style avec de nombreuses sections. Vous devrez probablement faire défiler de haut en bas pour corriger les choses tout en travaillant sur votre thème.

En utilisant Sass, vous pouvez importer plusieurs fichiers dans votre feuille de style principale et générer un seul fichier CSS pour votre thème.

Qu'en est-il de @import en CSS ?

Le problème avec l'utilisation de @import dans votre fichier CSS est qu'à chaque fois que vous ajoutez un @import, votre fichier CSS effectue une autre requête HTTP vers le serveur. Cela affecte le temps de chargement de votre page, ce qui n'est pas bon pour votre projet.

D'un autre côté, lorsque vous utilisez @import dans Sass, il inclura les fichiers dans votre fichier Sass et les servira tous dans un seul fichier CSS pour les navigateurs.

Pour apprendre à utiliser @import dans Sass, vous devez d'abord créer un fichier reset.scss dans le répertoire des feuilles de style de votre thème et y coller ce code.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Maintenant, vous devez ouvrir votre fichier principal style.scss et ajouter cette ligne à l'endroit où vous souhaitez que le fichier de réinitialisation soit importé :

@import 'reset';

Notez que vous n'avez pas besoin d'entrer le nom de fichier complet. Pour compiler cela, vous devez ouvrir Koala et cliquer à nouveau sur le bouton de compilation. Ouvrez maintenant le fichier style.css principal de votre thème, et vous verrez votre CSS de réinitialisation inclus dedans.

Imbrication dans Sass

Contrairement à HTML, CSS n'est pas un langage imbriqué. Sass vous permet de créer des fichiers imbriqués faciles à gérer et à utiliser. Par exemple, vous pouvez imbriquer tous les éléments de la section <article> sous le sélecteur d'article.

En tant que concepteur de thèmes WordPress, cela vous permet de travailler sur différentes sections et de styliser facilement chaque élément. Pour voir l'imbrication en action, ajoutez ceci à votre fichier style.scss :

.entry-content { 
p { 
font-size:12px;
line-height:150%;  
} 
ul { 
line-height:150%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6633;
} 
} 

Après traitement, il générera le CSS suivant :

.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 150%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6633; }

En tant que concepteur de thèmes, vous concevrez un aspect différent pour les widgets, les articles, les menus de navigation, l'en-tête, etc. L'utilisation de l'imbrication dans Sass le rend bien structuré, et vous n'avez pas à écrire les mêmes classes, sélecteurs et identifiants encore et encore.

Utilisation des Mixins dans Sass

Parfois, vous aurez besoin de réutiliser du CSS dans votre projet, même si les règles de style seront les mêmes, car vous les utiliserez sur différents sélecteurs et classes. C'est là que les mixins sont utiles. Ajoutons un mixin à votre fichier style.scss :

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Ce mixin masque essentiellement du texte pour qu'il ne soit pas affiché. Voici un exemple d'utilisation de ce mixin pour masquer le texte de votre logo :

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

Notez que vous devez utiliser @include pour ajouter un mixin. Après traitement, il générera le CSS suivant :

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Les mixins sont également très utiles avec les préfixes vendeurs. Lors de l'ajout de valeurs d'opacité ou de rayon de bordure, l'utilisation de mixins peut vous faire gagner beaucoup de temps. Regardez cet exemple, où nous avons ajouté un mixin pour ajouter un rayon de bordure.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
 
.largebutton { @include border-radius(10px); }
.smallbutton { @include border-radius(5px); }

Après compilation, il générera le CSS suivant :

.largebutton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }
 
.smallbutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

Ressources supplémentaires

Sass Lang
The Sass Way

Nous espérons que cet article vous a aidé à en apprendre davantage sur Sass pour le développement de thèmes WordPress. De nombreux concepteurs de thèmes WordPress l'utilisent déjà. Certains vont jusqu'à dire qu'à l'avenir, tout le CSS sera prétraité, et que les développeurs de thèmes WordPress devront améliorer leurs compétences. Vous pourriez également vouloir consulter notre guide sur les conseils sur la classe body de WordPress pour les concepteurs de thèmes, ou notre sélection d'experts des meilleurs constructeurs de pages WordPress par glisser-déposer.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.