Share
Less.CSS est en train de devenir un outil populaire pour rendre les feuilles de style "dynamiques". Je travaille depuis quelques temps sur l’intégration de Less.CSS à WordPress. Nous allons donc aujourd’hui vous présenter un court tutoriel sur la façon de commencer à l’utiliser, ainsi que le framework CSS BluePrint pour un flux de travail plus rapide dans WordPress..
Je sais ce que vous pensez, mais désolé, cela ne signifie pas que vous écrivez simplement du code MOINS. Combien de fois avez-vous travaillé sur un projet et souhaité pouvoir simplifier les choses en incluant une fonction dans votre fichier CSS, en utilisant certaines variables pour modifier les couleurs ou d'autres propriétés, ou d'autres techniques de programmation? Avec moins de CSS, votre souhait peut être transformé en réalité.
Less est un outil CSS qui vous permet d'accélérer et de simplifier votre développement en vous permettant d'utiliser des variables, l'héritage (via mixins), des fonctions (opérations), etc. En résumé, Less CSS vous donne la possibilité de mélanger des techniques de programmation avec votre CSS. Assez parlé cependant. Commençons!
Less est disponible en deux versions principales, une version compilée et une version optimisée pour JavaScript. Aux fins de notre discussion, nous allons nous concentrer sur les compilé version. J'ai choisi de me concentrer sur cette version principalement parce que je n'aime pas inclure dans mon site des fichiers que je n'ai pas à le faire. Après tout, chaque fichier dont votre site a besoin pour fonctionner et avoir un aspect attrayant ralentit le chargement du site..
Voici comment cela fonctionne: vous visitez le lien suivant et téléchargez l’application pour mac. Désolé les utilisateurs de Windows, ce n'est que Mac, cette version du didacticiel ne fonctionnera donc que pour les utilisateurs de Mac. Une fois l'application téléchargée, vous devez configurer la structure de votre site (que je traiterai ci-dessous)..
Nous allons couvrir beaucoup de contenu dans ce tutoriel. Je crois que travailler aussi efficacement que possible avec les meilleurs outils disponibles. Pour cette raison, nous emploierons WordPress et Plan travailler avec ce projet. Avant de passer à l’étape suivante, téléchargez le Blueprint Framework..
Le seul fichier que nous allons utiliser est screen.css dans la mesure où il regroupe tous les fichiers principaux composant la structure en un seul fichier. Allez-y et trouvez-le et extrayez-le sur votre bureau. Par souci de brièveté, ce didacticiel suppose que vous maîtrisiez la configuration de WordPress ainsi que les bases de Blueprint. Si vous avez besoin de plus d'informations à ce sujet, laissez-moi des commentaires et je vous répondrai ou écrirai un message à ce sujet. Il y a aussi un tut informatif sur Nettuts à propos de Blueprint
Pour configurer votre structure de fichiers, reportez-vous à la capture d'écran ci-dessous. Voici à quoi devrait ressembler votre structure de répertoires, moins les fichiers css du dossier stylesheets. Ceux-ci seront générés automatiquement pour vous lorsque vous sauvegarderez un fichier..
Les éléments importants à prendre dans cette capture d'écran sont que nous avons un dossier styles.css dans le répertoire des thèmes dans WordPress, ce qui complique certaines choses. Ce fichier extrait simplement d'autres fichiers d'un sous-répertoire via la directive @import. La raison en est que WordPress utilise les commentaires dans styles.css identifier un thème. Ne pas mettre cela dans le sac a tendance à gâcher les choses. En incluant des fichiers dans le styles.css fichier via une nature composite, nous tirons essentiellement parti de toutes les fonctionnalités dynamiques de Less CSS tout en nous assurant que notre thème se comporte correctement dans WordPress. Nous réduisons aussi notre CSS pour accélérer le temps de chargement du site. En outre, il supprimera tous les commentaires et les espaces.
Il y a quelques réglages que j'aime vérifier. Vous voulez probablement le faire aussi. Ci-dessous une capture d'écran de ces.
Ensuite, placez le screen.css fichier dans un sous-répertoire nommé stylesheets avec un fichier main.css. Puis renommez ces deux fichiers pour qu'ils portent l'extension .less au lieu de .css. Une fois que vous avez fait cela, lancez l'application Less sur votre Mac et faites glisser le dossier de votre thème dans l'application. Cela le configure essentiellement pour que l'application Moins connaisse votre projet. Désormais, chaque fois que vous enregistrez moins de fichiers, ils sont automatiquement compilés en CSS. Assez chouette hein? Si, pour une raison quelconque, cela ne se produit pas, vous pouvez cliquer sur l'onglet Compilateur, puis sur Tout compiler..
Ok, alors maintenant que tout cela est mis en place, qu'est-ce que Less fait vraiment pour moi? Je suis content que vous ayez demandé au jeune padawan. Laisse moi te montrer!
Alors, disons que vous avez quelques couleurs primaires sur votre site Web. Au lieu d'avoir à saisir les valeurs hexadécimales ou RGBA à chaque fois que vous souhaitez utiliser une couleur, vous pouvez simplement utiliser une variable pour stocker votre couleur, puis utiliser le nom de la variable pour identifier la couleur que vous souhaitez utiliser. Par exemple, pour stocker le gris clair, vous pouvez déclarer une variable comme ceci:
@lightGray = #ddd; / * - puis utilisez-le dans votre css comme ceci: - * / div # box1 background: @lightGray;
Maintenant, chaque fois que vous avez besoin de changer de couleur, tout ce que vous avez à faire est de changer la valeur de @lightGray et cela se répercutera sur le reste de votre fichier css..
Le prochain truc astucieux dont je veux parler est l'héritage. Pour les débutants en CSS, l'héritage signifie simplement qu'une classe peut hériter ou récupérer des traits d'une classe précédente (classe Parent). Ceci est fait par une construction de Less appelée Mixins. Celles-ci intègrent virtuellement toutes les propriétés d'une classe dans une autre classe. L'un des avantages de Mixins est que la propriété spécifiée dans votre classe enfant annulera le même comportement hérité de la classe parent. En clair, cela signifie que j'ai une classe qui compose mes boutons sur ma page en utilisant des dégradés CSS3 bien pratiques. Bien que j'aime le remplissage, la taille de la police et d'autres attributs du bouton, je souhaite que mes couleurs changent. Je voudrais faire ce qui suit:
/ * - Bouton que j'utilise comme bouton base / parent - * / .myBlueButton display: block; rembourrage: 4px 12px; arrière-plan: RGB (30,87,153); / * Vieux navigateurs * / fond: -moz-linear-gradient (top, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232, 1100%); / * FF3.6 + * / background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, rgba (30,87,153,1))), couleur-stop (50%, rgba (41,137,216) , 1)), arrêt de la couleur (51%, rgba (32,124,202,1)), arrêt de la couleur (100%, rgba (125,185,22,1))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (haut, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232 personnes) ,1100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (top, rgba (30,87,153,1)) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125 185 232,1) 100%); / * Opera11.10 + * / background: -ms-linear-gradient (top, rgba (30,87,153,1) 0%, rgba (41,137,216,1)) 50%, rgba (32,124,202,1) 51%, rgba ( 125 185 232,1) 100%); / * IE10 + * / arrière-plan: gradient linéaire (en haut, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100% ) / * W3C * / / * - Bouton que j'utilise comme bouton d'héritage / fils - * / .myGreenButton .myBlueButton; arrière-plan: RGB (157,213,58); / * Vieux navigateurs * / fond: -moz-linear-gradient (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124, 188, 10,1) 100%); / * FF3.6 + * / background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, rgba (157,213,58,1))), couleur-stop (50%, rgba (161,213 , 79,1)), arrêt de la couleur (51%, rgba (128, 194, 23,1)), arrêt de la couleur (100%, rgba (124, 188, 10,1))); / * Chrome, Safari4 + * / arrière-plan: -webkit-linear-gradient (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% , rgba (124, 188, 10,1) 100%); / * Chrome10 +, Safari5.1 + * / arrière-plan: -o-linéaire-gradient (haut, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1 ) 51%, rgba (124, 188, 10,1) 100%); / * Opera11.10 + * / background: -ms-linear-gradient (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51 %, rgba (124,188,10,1) 100%); / * IE10 + * / background: linéaire-gradient (haut, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188, 10,1) 100%); / * W3C * /
Il y a une mise en garde à garder à l'esprit. Si vous utilisez le générateur de gradient CSS3, Less ne semble pas aimer la ligne commençant par le filtre. Comme vous pouvez le constater, le bouton enfant capture tout le comportement du bouton parent en incluant les attributs du bouton bleu sur la ligne marquée.
myBlueButton;
.
Il remplace ensuite la couleur en spécifiant ses propres couleurs d'arrière-plan. Le prochain et dernier élément que nous couvrirons utilise un mélange paramétrique (un mélange qui prend des paramètres) avec Less. Ceci est utile dans les cas où vous utilisez des préfixes spécifiques au navigateur et autres.
.borderRadius (@border_radius) -moz-border-radius: @border_radius; -webkit-radius: @border_radius; -border-radius: @border_radius;
Bien sûr, vous pouvez appliquer de nombreux autres comportements et effets. Vous pouvez suivre le lien en haut de la page sur le site Less et étudier à votre guise. Il y a aussi une petite vidéo sur Nettuts qui parle de la bibliothèque Less.js.
Voilà comment configurer un projet à utiliser dans WordPress avec Less et BluePrint. J'espère que ce que vous avez appris ici aujourd'hui vous sera utile dans vos projets futurs. Si vous avez d'autres questions, n'hésitez pas à répondre aux commentaires..
Accentsconagua