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

En tant que nouveau concepteur de thème WordPress, vous apprendrez rapidement à gérer des fichiers CSS longs, tout en les maintenant organisés, évolutifs et lisibles. Vous apprendrez également que de nombreux concepteurs et développeurs frontaux recommandent l’utilisation d’un langage de préprocesseur CSS tel que Sass ou LESS. Mais quelles sont ces choses? et comment commencez-vous 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 installer et commencer à les utiliser immédiatement..

Qu'est-ce que 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é, de même que le besoin des concepteurs de disposer d'un langage de feuille de style leur permettant de faire plus avec moins d'effort et de temps. Les langages de préprocesseur CSS, tels que Sass, vous permettent d’utiliser des fonctionnalités qui ne sont actuellement pas disponibles dans le CSS, telles que l’utilisation de variables, d’opérateurs mathématiques de base, d’imbrication, de 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 traite à l'avance 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 la zone d’administration de WordPress étaient conçus pour utiliser Sass à des fins de développement. De nombreux magasins de thèmes WordPress et développeurs utilisent déjà Sass pour accélérer leur processus de développement..

Débuter avec Sass pour le développement de thèmes WordPress

La plupart des concepteurs de thèmes utilisent l'environnement de développement local pour travailler sur leurs thèmes avant de le déployer dans un environnement de stockage intermédiaire ou un serveur actif. Sass étant 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 de ligne de commande, mais il existe également de belles applications à interface graphique disponibles pour Sass. Nous vous recommandons d’utiliser Koala, une application gratuite opensource 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 l'appeler "mythème" ou tout autre chose que vous voulez. Dans votre dossier de thème vide, créez un autre dossier et nommez-le stylesheets..

Dans le dossier Stylesheets, vous devez créer un style.scss fichier en utilisant un éditeur de texte comme Notepad.

Maintenant, vous devez 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 votre 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. Maintenant, sélectionnez 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 le tester, vous devez ouvrir votre fichier Sass. style.scss dans un éditeur de texte comme Notepad et ajoutez ce code:

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

Maintenant, vous devez enregistrer vos modifications et retourner à Koala. Faites un clic droit sur votre fichier Sass et la barre latérale se glissera à droite. Pour compiler votre fichier Sass, cliquez simplement sur le bouton '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;  

Notez que nous avons défini une variable $ polices dans notre fichier Sass. Désormais, chaque fois que nous devons ajouter une famille de polices, nous n'avons pas besoin de saisir à nouveau les noms de toutes les polices. Nous pouvons simplement utiliser $ polices.

Ce que les autres superpouvoirs Sass apporte au CSS?

Sass est incroyablement puissant, compatible avec les versions antérieures et très facile à apprendre. Comme nous l'avons mentionné précédemment, vous pouvez créer des variables, imbrication, mixins, import, partiels, opérateurs mathématiques et logiques, etc. Nous allons maintenant vous montrer quelques exemples et les essayer sur votre thème WordPress..

Gestion de plusieurs feuilles de style

En tant que concepteur de thème WordPress, vous rencontrerez un problème courant lié aux feuilles de style volumineuses comportant de nombreuses sections. Vous allez probablement faire défiler de haut en bas de nombreuses choses pour régler le problème tout en travaillant sur votre thème. Avec 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 lié à l'utilisation de @import dans votre fichier CSS est que chaque fois que vous ajoutez un @import, votre fichier CSS envoie 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, les fichiers de votre fichier Sass sont inclus et sont tous servis dans un seul fichier CSS pour les navigateurs..

Pour apprendre à utiliser @import dans Sass, vous devez d’abord créer un reset.scss déposer 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 Licence: none (domaine public) * / html, corps, div, span, applet, objet, iframe, h1, h2, h4, h4, h5, h6, p, bloc, citation, pre, a, abbr, acronyme, adresse, grand, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, fieldset, formulaire, étiquette, légende, tableau, légende, tbody, tfoot, pied, thead, tr, th, td, article, à part, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, navigation, sortie, ruby, section, résumé, heure, marque, audio, vidéo margin: 0; rembourrage: 0; bordure: 0; taille de police: 100%; font: hériter; alignement vertical: ligne de base;  / * Réinitialisation du rôle d'affichage HTML5 pour les anciens navigateurs * / article, à part, détails, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, 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 importer le fichier de réinitialisation:

 @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 principal.css de votre thème et vous verrez y voir 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 section, sous le sélecteur d’article. 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 fichier:

 .contenu de l'entrée p taille de la police: 12px; hauteur de ligne: 150%;  ul line-height: 150%;  a: lien, a: visité, a: actif text-decoration: none; couleur: # ff6633;  

Après traitement, les CSS suivants seront générés:

 .contenu de l'entrée p taille de la police: 12px; hauteur de ligne: 150%;  .entry-content ul line-height: 150%;  .entry-content a: lien, .entry-content a: visité, .entry-content a: active text-decoration: none; couleur: # ff6633;  

En tant que concepteur de thème, vous allez concevoir différentes interfaces pour les widgets, les publications, les menus de navigation, les en-têtes, etc. L'utilisation de nestin dans Sass est bien structurée et vous n'avez pas à écrire les mêmes classes, sélecteurs et identificateurs. à nouveau.

Utiliser des Mixins dans Sass

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

 @mixin hide-text overflow: hidden; retrait du texte: -9000px; bloc de visualisation;  

Ce mixin cache essentiellement du texte à afficher. Voici un exemple d'utilisation de ce mixin pour masquer le texte de votre logo:

 .logo background: url ("logo.png"); hauteur: 100px; largeur: 200px; @include hide-text;  

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

 .logo background: url ("logo.png"); hauteur: 100px; largeur: 200px; débordement caché; retrait du texte: -9000px; bloc de visualisation;  

Les mixins sont également très utiles avec les préfixes des vendeurs. Lorsque vous ajoutez des valeurs d'opacité ou un rayon de bordure, l'utilisation de mixins vous permet de 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 la 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 piqué votre intérêt pour le développement de thèmes pour Sass for 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. Dites-nous ce que vous pensez d'utiliser un langage de préprocesseur CSS comme Sass pour le développement de votre thème WordPress en laissant un commentaire ci-dessous.

Ressources supplémentaires

Sass Lang
La voie Sass