Share
Je trouve cela particulièrement intéressant lorsque d’autres développeurs partagent leurs conseils et astuces concernant le flux de travail. Il peut être très utile de faire un tour d’horizon dans le monde du développement de quelqu'un d’autre et de découvrir les outils qu’ils utilisent pour se rendre la vie plus facile..
Eh bien, aujourd’hui, je vais vous montrer une partie de mon propre flux de travail - en particulier, comment utiliser Sass et Compass lors du développement d’un thème WordPress. Au lieu d’expliquer simplement la configuration et les outils nécessaires, j’ai pensé qu’il serait préférable de repartir de zéro et de vous montrer exactement ce dont vous avez besoin pour élaborer un thème WordPress utilisant Sass et Compass..
J'espère que cet article vous paraît intéressant et qu'il me tarde de partager avec vous une petite partie de mon flux de travail. Je vous encourage à faire de même..
Après de nombreuses expériences, il s’agit du meilleur outil pour la prise en charge multi-plateforme de Sass et Compass. Ceci est une application de barre de menu uniquement qui peut compiler des fichiers Sass en CSS (il a également live-reload). Ce n'est pas gratuit, mais à 10,00 $ je l'ai trouvé plus que rentable.
Dans l’intérêt de fournir une solution pour tout lecteurs, quelle que soit la plate-forme, ce didacticiel fournira la configuration de l’application mentionnée ci-dessus. Il existe bien sûr d’autres alternatives, mais sachez que les choses peuvent nécessiter une configuration légèrement différente de celle présentée ici..
le _s thème est un thème sans design parfaitement adapté aux développeurs. Comme indiqué sur leur site Web "Je suis un thème destiné au piratage, alors ne m'utilisez pas comme thème pour les parents". - Cela semble parfait pour nous. Rendez-vous sur le thème _s de leur site Web et utilisez la commande «Générer» de leur page d'accueil pour télécharger une version personnalisée. Vous pouvez simplement télécharger le thème directement depuis GitHub, mais vous devrez alors rechercher manuellement toutes les instances de _s dans le thème et remplacez-les par votre propre préfixe. Utiliser 'Generate' fait cette partie pour vous automatiquement.
Une fois votre version personnalisée téléchargée, décompressez le répertoire du thème en wp-content / themes. Pour ce tutoriel, j'ai utilisé le générateur pour créer le thème. wp-tuts et la structure de répertoire devrait maintenant ressembler à ceci:
Vous pouvez maintenant aller de l'avant et activer le thème à partir du panneau d'administration.
Dans le répertoire racine du thème, nous aurons un dossier appelé toupet. C’est là que nous allons mettre tous nos .scss des dossiers. Compass.app va alors regarder ce répertoire et tout compiler dans le single style.css fichier qui habite à la racine du thème.
Voici les paramètres qui fonctionneront bien avec WordPress:
/ * config.rb dans la racine du thème. * / css_dir = "/" sass_dir = "sass" style_sortie =: compressé
Ok, nous avons notre toupet dossier et notre config.rb tous deux assis à la racine de notre thème. Nous sommes maintenant prêts à déchirer le fichier CSS du thème et à créer des fichiers individuels sur lesquels il sera plus facile de construire / maintenir à jour..
L'un des avantages de l'utilisation de tout préprocesseur CSS est la possibilité de scinder notre CSS en plusieurs petits fichiers. Cela aide énormément notre flux de travail, car nous pouvons organiser notre code en morceaux apparentés plus faciles à gérer et à utiliser. Donc, au lieu d’avoir tout rassemblé dans un seul fichier CSS géant, nous pouvons avoir un fichier séparé réservé aux réinitialise. Ensuite, nous pourrions aussi avoir un fichier séparé qui ne gère que le menu, un fichier pour médias, etc. etc. Nous pouvons avoir autant de .scss fichiers comme nous le souhaitons, et après la compilation, ils seront tous compressés en un seul style.css.
Si vous regardez le style.css fichier fourni avec le thème que vous avez téléchargé, vous verrez que l'auteur a mis des commentaires pour séparer le contenu en sections comme ceci:
/ * = Contenu -------------------------------------------------- - * / .sticky .hentry margin: 0 0 1.5em;
Nous utiliserons ces commentaires pour guider la division de cette feuille de style en deux parties distinctes. .scss des dossiers.
Dans le toupet répertoire, créez un fichier appelé style.scss - C'est le fichier que nous allons utiliser pour importer tous les autres fichiers. En outre, c'est le seul scss fichier qui ne sera pas préfixé par un trait de soulignement ("_"). Cela indique à notre compilateur que ce fichier doit être converti en un fichier CSS réel..
Maintenant, parcourez le style.css fichier et pour chaque section commentée, créez un nouveau fichier dans le toupet dossier préfixé par un trait de soulignement et portant l'extension de fichier .scss. Copiez le contenu de cette section dans le fichier nouvellement créé.
Par exemple, où vous voyez ceci dans le style.css, vous créeriez un fichier appelé _navigation.scss et le mettre dans le toupet dossier:
/ * = Navigation -------------------------------------------------- - * / .site-content [classe * = "navigation"] marge: 0 0 1.5em; débordement caché; [class * = "navigation"] .previous float: left; largeur: 50%; [class * = "navigation"] .next float: right; text-align: right; largeur: 50%; / * Finit par être sass / _navigation.scss * /
Après avoir parcouru toute la feuille de style, votre toupet Le répertoire devrait maintenant ressembler à ceci. (remarquerez que style.scss est le seul fichier qui ne comporte pas de trait de soulignement, tout le reste est considéré comme un fichier. partiel, et ne sera pas compilé dans un fichier CSS séparé.)
Maintenant que nous avons mis tous les CSS dans des fichiers SCSS distincts, nous devons maintenant les importer dans le style.scss fichier et aussi ajouter les informations de thème.
/ *! Nom du Thème: wp-tuts URI du Thème: http://underscores.me/ Auteur: Underscores.me URI du Auteur: http://underscores.me/ Description: Description Version: 1.0 Licence: GNU General Public License Licence URI: license. txt Tags: * / @import "reset"; @import "global"; @import "menu"; @import "content"; @import "asides"; @import "media"; @import 'navigation'; @import 'commentaires'; @import 'widgets'; @import 'scroll';
Assurez-vous que ces fichiers sont importés dans le même ordre que celui indiqué par le CSS dans le document d'origine. Vous pouvez voir que nous commençons par réinitialiser et ajoutez le reste dans le bon ordre. Vous devez toujours penser à l'ordre dans lequel les règles sont définies dans le CSS final.!
Important: Notez également que le point d'exclamation (
Accentsconagua
!) sur la première ligne. Cela dit au compilateur ne pas dépouiller ce commentaire important. Nous devons le faire parce que plus tôt nous avons défini l'option style_sortie =: compressé (dans le config.rb fichier). Cela signifie que tous les espaces et commentaires seront supprimés de la version compilée. C'est une bonne chose et vous voulez certainement que cela se produise - mais pas ici! Si ce commentaire était supprimé par le compilateur, WordPress ne reconnaîtrait pas ce thème.. Nous avons effectué tout le travail manuel, il est maintenant temps de mettre en œuvre l'automatisation. Allez-y et supprimez le style.css fichier de la racine du thème car nous n’en avons plus besoin. Maintenant, si vous avez suivi avec succès toutes les étapes ci-dessus, alors vous devriez pouvoir ouvrir Compass.app et choisir Regarder un dossier. Sélectionnez le répertoire racine de votre thème (dans notre cas, c’est le répertoire wp-tuts dossier à l'intérieur de wp-content / themes)
Après un très bref délai, vous devriez voir un nouveau style.css fichier qui a été généré. Ouvrez-le et vous devriez voir une version réduite. Ceci indique que tout a fonctionné comme prévu.
À ce stade, nous avons converti le code CSS de base du thème en petits morceaux de code gérables. Nous allons maintenant examiner l'utilisation de Compass dans notre projet..
Compass est un framework qui fournit de nombreuses fonctionnalités puissantes pour vous simplifier la vie lors de la création de CSS. Parce que nous utilisons Compass.app, nous pouvons apporter les fonctionnalités fournies par Compass en important simplement le module requis dans notre style.scss fichier. Par exemple, si vous voulez les modules CSS3 de Compass, procédez comme suit:
/ * Faites-en la première importation, elle sera disponible pour tous les fichiers. * / @import "compass / css3";
C'est vraiment ça. Maintenant, vous pouvez vous rendre sur le site Web Compass et, lorsque vous serez prêt à utiliser l'une de ses fonctionnalités dans votre projet, vous saurez exactement comment le faire..
Vous avez maintenant tout ce dont vous avez besoin pour commencer à utiliser Sass et Compass lors de la création de thèmes dans WordPress. Ensuite, nous allons jeter un oeil à quelques exemples très simples sur la façon de les utiliser et pendant que ce tutoriel est ne pas une introduction à Sass and Compass, les exemples ci-dessous devraient aider les débutants à mieux reconnaître les avantages de l’utilisation d’un pré-processeur CSS.
Comme nous exploitons maintenant la puissance d’un pré-processeur, nous pouvons être plus efficaces lors de l’écriture de CSS et éviter de nous répéter. Une des choses que j'ai sur chaque projet WordPress est un _vars.scss fichier où je garderais tout ce qui est spécifique au projet dans les variables. De cette façon, je peux faire référence aux noms de variables dans de nombreux fichiers, et si je devais changer quelque chose, je n'aurais qu'à le faire à un seul endroit..
/ * Exemple de types d'éléments que vous pourriez inclure dans _vars.scss * / $ brand-color: # 56483B; $ default-padding: 24px;
Pour les utiliser dans toute votre collection de .scss fichiers, juste @importation comme n'importe quel autre fichier dans style.scss, mais assurez-vous que c'est le premier, ou juste après réinitialiser serait ok aussi. Une fois que vous l'avez importé, utilisez les variables suivantes:
/ * Dans tout fichier importé APRES _vars.scss, vous pouvez utiliser toutes vos variables * / .logo color: $ brand-color
Souvent, beaucoup de gens n’utiliseront Compass que pour ses capacités de préfixage des vendeurs. Je tombe moi-même dans cette catégorie et voici un petit exemple pour montrer pourquoi:
/ * Sans boussole * / * -moz-box-sizing: border-box; -webkit-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; / * Avec Compass * / * @include box-sizing (border-box);
J'espère que ce tutoriel a été utile pour montrer un flux de travail simple mais efficace lors de l'utilisation de Sass and Compass dans WordPress. Les deux exemples que j'ai donnés à la fin sont les bases absolues d'utiliser Sass et Compass et vous devriez examiner les deux séparément pour les utiliser pleinement.
Cela dit, vous améliorerez toujours votre flux de travail avec ce que vous avez appris ici. En utilisant ces outils pour diviser CSS en petits fichiers, en utilisant des variables pour réduire le nombre de répétitions et en évitant de taper des préfixes de fournisseur, vous êtes sur la bonne voie pour améliorer le workflow de développement..
