En tant que nouveau concepteur de thèmes WordPress, vous apprendrez rapidement les défis de la maintenance de longs fichiers CSS tout en les gardant organisés, évolutifs et lisibles. Vous apprendrez également que de nombreux concepteurs et développeurs frontaux recommandent d’utiliser un langage de préprocesseur CSS comme Sass ou LESS. Mais quelles sont ces choses ? et comment vous lancez-vous avec eux? Cet article est une introduction à Sass pour les nouveaux concepteurs de thèmes WordPress. Nous vous dirons ce qu’est un préprocesseur CSS, pourquoi vous en avez besoin et comment l’installer et commencer à l’utiliser immédiatement.
C’est quoi Sass ?
Le CSS que nous utilisons a été conçu pour être un langage de feuille de style facile à utiliser. Cependant, le Web a évolué, tout comme le besoin des concepteurs d’avoir 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 dans le CSS, telles que l’utilisation de variables, les opérateurs mathématiques de base, l’imbrication, les mixins, etc.
Cela ressemble beaucoup à 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 pouvant être utilisés par les navigateurs.
Depuis la version 3.8, les styles de zone d’administration WordPress ont été portés pour utiliser Sass pour le développement. Il existe de nombreux magasins de thèmes WordPress et développeurs utilisant 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 dans un environnement intermédiaire ou un serveur en direct. Étant donné que 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 outil de ligne de commande, mais il existe également de belles applications GUI 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 ce que vous voulez. Dans votre dossier de thème vierge, créez un autre dossier et nommez-le feuilles de style.
Dans le dossier des feuilles de style, vous devez créer un style.scss fichier à 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 votre répertoire de thèmes et ajoutez-le en tant que 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 Définir le chemin de sortie option. Sélectionnez maintenant la racine de votre répertoire de thème, exemple, /wp-content/themes/mytheme/ et appuyez sur entrée. Koala va maintenant générer 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 Notepad et ajoutez 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 ‘Compiler’ bouton. Vous pouvez voir les résultats en ouvrant le style.css fichier dans votre répertoire de thème, et il aura le CSS traité comme ceci :
body {
font-family: arial, verdana, sans-serif; }
Remarquez que nous avons défini une variable $fonts dans notre fichier Sass. Désormais, chaque fois que nous devons ajouter une famille de polices, nous n’avons plus 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. Nous allons maintenant vous montrer quelques exemples et vous pouvez les essayer sur votre thème WordPress.
Gestion de plusieurs feuilles de style
Un problème courant auquel vous serez confronté en tant que concepteur de thème WordPress est les grandes feuilles de style avec beaucoup de sections. Vous ferez probablement beaucoup défiler vers le haut et vers le bas pour réparer 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 CSS @import ?
Le problème avec l’utilisation de @import dans votre fichier CSS est que chaque fois que vous ajoutez un @import, votre fichier CSS fait une autre requête HTTP au serveur. Cela affecte le temps de chargement de votre page, ce qui n’est pas bon pour votre projet. D’autre part, 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 reset.scss fichier dans le répertoire des feuilles de style de votre thème et collez-y 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;
}
Vous devez maintenant ouvrir votre fichier principal style.scss et ajouter cette ligne à l’endroit où vous souhaitez importer le fichier de réinitialisation :
@import 'reset';
Notez que vous n’avez pas besoin d’entrer le nom complet du fichier. 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.
Nestin à 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 du <article> sous le sélecteur d’articles. En tant que concepteur de thème WordPress, cela vous permet de travailler sur différentes sections et de styliser facilement chaque élément. Pour voir nestin en action, ajoutez ceci à votre style.scss déposer:
.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 le traitement, il affichera 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ème, vous concevrez une apparence différente pour les widgets, les publications, les menus de navigation, l’en-tête, etc. L’utilisation de nestin dans Sass le rend bien structuré et vous n’avez pas à écrire les mêmes classes, sélecteurs et identifiants sur et à nouveau.
Utilisation de Mixins dans Sass
Parfois, vous devrez réutiliser certains CSS tout au long de 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 cache essentiellement du texte d’être affiché. Voici un exemple de la façon dont vous pouvez utiliser 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 de fournisseur. 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; }
Nous espérons que cet article a éveillé votre intérêt pour 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, tous les CSS seront prétraités et que les développeurs de thèmes WordPress doivent améliorer leur jeu. Faites-nous savoir ce que vous pensez de l’utilisation d’un langage de préprocesseur CSS comme Sass pour le développement de votre thème WordPress en laissant un commentaire ci-dessous.
