Share
Il n'y a pas si longtemps, nous avons jeté un coup d'œil à The Basics of LESS et, s'il s'agit d'une référence solide pour les débutants, vous pouvez faire beaucoup plus avec LESS! Le but de ce tutoriel est de développer les connaissances de l’article précédent et de vous donner quelques conseils pratiques sur la façon d’utiliser toutes les bonnes choses de LESS..
Les concepts de l'article précédent seront essentiels pour comprendre celui-ci. Les variables, les mixins, les fonctions et l’imbrication dans LESS doivent tous être familiers et vous devez au moins avoir une connaissance pratique de LESS..
Remarque: il y a pas mal d'avis subjectifs dans cet article. Beaucoup de choses que nous discuterons ont à voir avec la méthodologie par opposition aux règles et règlements d'une langue. Je vais vous montrer comment organiser les fichiers et créer des mixins, mais il pourrait y avoir d'autres façons de faire les choses. Si vous pensez utiliser une meilleure structure ou si vous avez des astuces à vous donner, n'hésitez pas à vous laisser aller dans les commentaires..
L'organisation de vos fichiers est toujours extrêmement importante, tout autant pour MOINS. Je crée généralement un dossier 'styles' dans mon répertoire de projet principal où je stocke tous les styles requis pour ce projet. Alors, que se passe-t-il si votre projet nécessite l'inclusion de fichiers CSS à partir de plusieurs emplacements??
La meilleure façon de vous simplifier la vie consiste à utiliser un outil tel que Winless ou CodeKit. Ces outils vous permettent de compiler différents fichiers à différents emplacements. Cela vous permet de conserver tous vos fichiers de style au même endroit tout en les compilant dans différents dossiers de vos projets..
Comme vous pouvez le constater, dans ce projet WordPress, le fichier "style.less" en surbrillance est contenu dans le dossier "styles". WordPress nécessitant un fichier 'style.css' dans le répertoire principal, nous devons le compiler ici. CodeKit ou un outil similaire rend cela facile car il suffit de le configurer une seule fois et de l'oublier jusqu'à la fin du projet..
Un autre problème pouvant survenir avec les fichiers CSS est la façon de gérer les fichiers tiers. Les systèmes de grille, les styles de curseurs JavaScript, les réinitialisations, etc. nécessitent l'utilisation de fichiers CSS (parfois multiples). Il existe généralement deux méthodes pour y arriver. Vous liez les fichiers à votre page Web séparément ou vous insérez tout le code dans un fichier et vous le réduisez à des fins d’exécution. Avec un outil de compilation LESS, cela devient encore plus facile!
À l'aide de règles d'importation, vous pouvez extraire tous les fichiers de votre feuille de style LESS principale. Vous pouvez également importer moins de fichiers, ce qui permet d'utiliser leurs règles, mixins et autres éléments dans tous les fichiers suivants..
Remarque: Bien que cette méthode soit utile, ce n'est pas une solution universelle. Dans certains cas, vous devrez peut-être inclure tous les fichiers séparément, dans d'autres, il peut être préférable de tout inclure dans un fichier..
Le plus gros problème avec CSS est le manque extrême de cohérence dans presque tous les projets. Cette situation découle principalement de la nature même du langage, pas nécessairement de l’inefficacité du programmeur. CSS est un langage très souple et indulgent, ce qui signifie qu'il favorise la configuration par rapport aux conventions, alors que l'inverse serait préférable. De plus, les codes CSS ont tendance à être codés de manière encore plus procédurale que d'habitude, ce qui signifie que les modèles globaux ne sont pas toujours remarqués et mis en œuvre aussi simplement qu'ils le pourraient..
Bien que LESS ne soit pas un cureall, il vous permet d’être beaucoup plus cohérent en vous fournissant des outils tels que des fonctions et l’imbrication. Jetons un coup d'oeil à quelques exemples où vous pouvez atteindre une meilleure cohérence avec les outils LESS.
.radius (@radius: 5px) -webkit-border-radius (@radius); -khtml-border-radius (@radius); -moz-border-radius (@radius); -ie-border-radius (@radius); -o-border-radius (@radius); border-radius (@radius);
Sans MOINS, vous devrez copier-coller ces règles à tout moment. Beaucoup de gens écrivent simplement au fur et à mesure, il est donc beaucoup plus probable que vous oubliez l’un des préfixes ou que vous les écriviez dans un ordre différent. Bien que cela ne soit pas une affaire pour votre site Web, chaque petite incohérence ajoute un bruit inutile à votre code..
La nature imbriquée des règles vous donne également la possibilité d'ajouter de l'ordre à votre code. J'essaie d'utiliser le moins possible de div et d'autres éléments de conteneur et j'essaie de cibler chaque élément aussi précisément que possible.
.commentlist .comment .comment-date .comment-time color: # 888;
Cela semble un peu redondant au début et je suis d’accord, d’une certaine manière. Cependant, tout est très clair.
Son utilité ne sera apparente que si vous l'utilisez dans un projet plus vaste, mais voici un extrait de code qui montre comment un commentaire est réactif. En dessous d'une largeur spécifique, la partie heure de la date du commentaire est masquée pour économiser de l'espace..
Écran @média et (largeur maximale: 600 pixels) .commentlist .mentment-container .mentment-principal .mentment-en-tête .mentment-date .time . display aucun:
Je suis d'accord que cela semble horrible. Cependant, aucune réflexion n'a été entreprise pour créer la règle. Pas de réflexion signifie un retour en arrière facile, car vous n'avez pas besoin de comprendre les astuces intelligentes que vous avez ajoutées en cours de route. En outre, vous pouvez savoir ce que cette règle fait simplement en la regardant.
Mon dernier argument en faveur de la cohérence est plus complexe, mais je pense qu'il vaut la peine de l'examiner. Je construis des thèmes WordPress pour la vente sur ThemeForest et une fonctionnalité est que vous pouvez choisir n’importe quelle couleur pour votre thème. Les éléments sont recolorés à votre choix. En procédant ainsi, chaque fois qu'une "couleur primaire" est définie, elle est écrasée par le code CSS dynamique que nous produisons en PHP. Cela ressemble à ceci:
Contenu de notre fichier LESS:
@ couleur-primaire: rouge; .button background: @ color-primary; rembourrage: 8px 20px;
Contenu d'un PHP inclus à la fin de l'en-tête HTML:
En gros, chaque fois qu'il y a une référence à '@ color-primary' dans le fichier LESS, nous devons créer une règle PHP pour nous assurer que les couleurs choisies par l'utilisateur sont reflétées sur le site. Cela peut prendre un certain temps et, plus important encore, extrêmement ennuyeuse. Pour lutter contre l'ennui, nous créons un script qui analyse notre fichier LESS et crée le code PHP que nous pouvons simplement copier-coller en une fois. Ceci est un peu diffcile car il existe des règles dynamiques avec des fonctions et autres, mais pour retirer ceci, notre fichier LESS doit être bien structuré et cohérent..
Utiliser une bibliothèque de règles commune constitue un gain de temps considérable et un moyen d'accroître la cohérence d'un projet à l'autre. Auparavant j'ai demandé; pourquoi écrire toutes les règles du rayon de la bordure quand on peut utiliser un mixin? Maintenant, nous pouvons sauter d'un niveau supérieur. Pourquoi réécrire le mixin border radius pour chaque projet alors que vous ne pouvez utiliser que le même?
Certains mixins (en particulier ceux qui traitent des spécificités des fournisseurs) seront les mêmes pour tous les projets. Ceux-ci peuvent être séparés dans un fichier 'mixins.less' que vous pouvez utiliser n'importe où. Voici quelques exemples de mixins qui sont toujours pratiques.
.opacité (@opacité: 0.8) @ieopacity: @opacity * 100; filtre: ~ "alpha (opacité = @ ieopacity)"; -khtml-opacity: @opacity; -moz-opacity: @opacity; opacité: @opacité;
.dégradé (@start, @end) background: @start; filtre: ~ "progid: DXImageTransform.Microsoft.gradient (startColorstr =" @ start ", endColorstr =" @ end ", GradientType = 0)"; arrière-plan: -webkit-gradient (linéaire, haut à gauche, bas à gauche, arrêt de la couleur (0%, @ début), arrêt de la couleur (100%, @ fin)); arrière-plan: -webkit-linear-gradient (en haut, @ début 0%, @ fin 100%); arrière-plan: -moz-linear-gradient (en haut, @ début 0%, @ fin 100%); arrière-plan: -ms-linear-gradient (haut, @ début 0%, @ fin 100%); arrière-plan: -o-linear-gradient (haut, @ début 0%, @ fin 100%); fond: dégradé linéaire (en haut, @ début 0%, @ fin 100%);
.element-color (@color) lorsque (luminosité (@color)> = 60%) color: @color - # 888; .element-color (@color) lorsque (légèreté (@color) < 60% ) color: #fff;
Ce dernier est particulièrement cool. Si la couleur d'arrière-plan est claire, la couleur du texte sera une version très sombre de la même couleur.
Je suggère de toujours penser au placement de la règle que vous écrivez. Etes-vous sûr qu'il est utilisé globalement pour tous les projets? Il serait peut-être tentant de définir de nombreuses règles, mais en réalité, il serait préférable de créer également un fichier spécifique à un projet..
Rappelez-vous l'image du commentaire plus tôt? Le conteneur de cet élément a un format spécifique. Il a une bordure blanche et un contour gris. De nombreux autres éléments de ce thème partagent ce modèle. Cela pourrait être créé avec une règle comme celle-ci:
.box border: 1px solid #fff; contour: 1px solide #dedede; .comment .box; fond: #eeeeee;
Alors que ce est utilisé partout ici, il ne sera pas le même à travers plusieurs projets. Par conséquent, il serait préférable de créer un fichier du type 'mytheme.less' contenant ces règles largement utilisées, mais spécifiques à un thème. Si vous voulez vraiment utiliser quelque chose comme dans le fichier global, vous pouvez le développer comme ceci:
.bordé d'une boîte (@ border-color: #fff, @ contour-color: #dedede) border: 1px solide @ border-color; contour: 1px solid @ contour-color;
Cette règle vous permettra de créer le même style de boîte tout aussi facilement, mais vous pouvez également ajouter des paramètres pour créer des bordures de boîte de couleurs différentes. Vous pouvez aller plus loin en faisant un résumé encore plus complet et en créant un fichier 'bootstrap.less'; cela nous amène joliment dans notre sujet suivant, créant un cadre pour nous-mêmes.
@ border-box-border-color: #fff; @ border-box-outline-color: #dedede;
.encadré (@bc: @ border-box-border-color, @oc: @ border-box-outline-color) border: 1px solid @bc; contour: 1px solide @oc;
Créer votre propre framework est généralement un non-non, sauf si vous êtes très avancé dans votre domaine principal (et 5-6 autres) et que vous avez de très bonnes raisons de le faire. Avec CSS et LESS, c'est un peu différent. vous pouvez commencer à créer votre propre cadre dès le premier jour. Puisque LESS est un sur-ensemble de CSS, tout ce que vous faites est parfaitement adapté au code existant. Comme CSS est indulgent et en cascade, vous ne pouvez causer aucun dommage permanent qui ne puisse être annulé..
Je suggère de créer un fichier principal 'mixins' pour commencer. Vous pouvez toujours en retirer ou y ajouter des éléments si nécessaire. Plus tard, vous pourrez ajouter des fichiers spécifiques au projet, des fichiers tiers, un fichier d’amorçage, etc. Voici comment mon framework est organisé.
Comme dans n'importe quelle langue, les aspects pratiques du codage comportent de nombreux défis et techniques qui ne peuvent être découverts et surmontés simplement en regardant la documentation. Pour utiliser LESS au maximum, vous devriez lire les suggestions et essayer de comprendre la logique, mais vous devrez au final acquérir de l'expérience. La cohérence, la logique et la simplicité devraient être vos mots directeurs et LESS vous donne tous les outils pour y parvenir..
Enfin, je serais heureux de recevoir vos commentaires et d’apprendre comment vous organisez LESS et comment vous le mettez en œuvre dans vos projets. Merci d'avoir lu!
Accentsconagua