LESS est un petit outil étonnant qui étend CSS avec l’ajout de variables, de mixins, d’opérations et de règles imbriquées. Cela signifie que vous pouvez écrire du code plus clair très rapidement. Et avec la montée récente de propriétés complexes en CSS3, nous avons quelques exemples criants de code qui pourraient certainement être simplifiés.
Aujourd'hui, nous verrons comment utiliser la dernière implémentation JavaScript de LESS pour simplifier le balisage CSS3. L'une des fonctionnalités clés que nous examinerons et que je n'ai pas vue discuter ailleurs est la façon de traiter plusieurs variables dans mixins. C'est assez simple mais peut être déroutant si vous ne l'avez jamais essayé.
Tout le monde peut utiliser LESS.js
Lorsque j'ai jeté un œil sur LESS, cela semblait être un travail énorme. Toutes ces étapes de compilation étranges et ces scripts Ruby donnaient finalement l'impression qu'ils allaient ajouter du temps à mon flux de travail au lieu de le réduire.
Heureusement, quelqu'un a compris que le processus entier pourrait être beaucoup plus simple avec JavaScript. Alors maintenant, implémenter LESS est aussi simple que de coller deux lignes de code dans votre code HTML et tout se compile automatiquement directement dans le navigateur! Voyons comment cela fonctionne.
Commencer
Pour vous assurer que votre code LESS est correctement compilé, jetez le code suivant dans la tête de votre code HTML.
Notez que le typique rel =? stylesheet? est devenu rel =? stylesheet / less? et que nous avons lié à une version hébergée par Google de LESS.js.
L'étape suivante consiste à créer un fichier style.less. Cela peut être nommé comme vous le souhaitez, assurez-vous simplement qu'il porte l'extension .less au lieu de .css, comme vous en avez l'habitude.
Déclaration de variables
De loin, l’une de mes fonctionnalités préférées de LESS est que vous pouvez utiliser des variables de la même manière que dans les principaux langages de programmation. Il est donc extrêmement facile de définir des styles globaux modifiables à un seul emplacement plutôt que de trier votre code pour rechercher toutes les occurrences de ce style.
Pour voir comment cela s’applique au niveau pratique, définissons quelques variables de couleur. Imaginez que notre page Web ait une couleur primaire et une couleur secondaire qui sont utilisées à plusieurs reprises dans le design. Plutôt que de se souvenir du code de couleur à chaque fois, nous pouvons simplement les définir comme variables.
Pour définir une variable dans LESS, utilisez le symbole @:
C'est tout! Maintenant, chaque fois que nous voulons utiliser ces couleurs dans notre conception, nous utilisons simplement le même CSS que nous faisons toujours mais insérons le nom de la variable à la place du code de couleur.
Maintenant, chaque fois que nous changeons la couleur dans la déclaration de variable, la modification sera automatiquement appliquée à tout le reste du code, quel que soit le lieu où la variable est appelée. Cela peut certainement vous faire gagner beaucoup de temps lorsque vous commencez à peaufiner vos conceptions.
Opérations
Comme avec JavaScript et tout autre langage de programmation auquel vous êtes habitué, LESS vous permet d'effectuer des opérations sur des variables. Cela peut vous épargner beaucoup de calcul mental à long terme.
En guise d'exemple simpliste, supposons que vous vouliez créer une boîte deux fois plus large que haute. Vous pouvez déclarer la hauteur dans une variable, puis définir une autre variable égale à deux fois ce nombre.
Ensuite, dans votre code, vous utiliserez ces variables pour définir la hauteur et la largeur de votre zone. Si vous deviez ensuite revenir en arrière et modifier boxHeight à 400px, boxWidth serait automatiquement défini sur 800px;
Mixins
Voici où le CSS3 entrera en jeu. Pour commencer, examinons la syntaxe de base d'une propriété CSS3 aléatoire, par exemple, border-radius.
Comme vous pouvez le constater, le moyen actuel de s’assurer que cela fonctionne sur le plus grand nombre de navigateurs consiste à inclure toutes les versions spécifiques à un navigateur. Ci-dessus nous avons utilisé rayon de la frontière en conjonction avec -webkit-border-radius et -moz-border-radius.
Chaque fois que nous voulons implémenter des angles arrondis dans notre CSS, nous devons répertorier manuellement toutes ces versions. Je vois votre cerveau bouger et vous expliquer comment vous pouvez simplement définir ces styles dans une classe, mais si vous vouliez la flexibilité nécessaire pour ajuster le rayon de la frontière élément par élément? Configurer une classe CSS réutilisable est une bonne solution, mais vous pouvez aller beaucoup plus loin avec LESS.
LESS vous permet de définir plusieurs variables dans une même classe, qui peut ensuite être intégrée ailleurs dans votre code. Pour configurer un mixin à l'aide de LESS, utilisez la syntaxe suivante:
Le code ci-dessus définit une variable pour le rayon et la rend égale à 12px, la jette dans toutes les versions de border-radius, puis stocke toutes ces informations dans une classe appelée .roundedCorners.
Maintenant, lorsque nous voulons appliquer des angles arrondis à un objet, nous ajoutons simplement la classe.
Cela appliquera un rayon d'angle de 12 pixels à notre boîte div en utilisant toutes les versions propriétaires appropriées.
Rappelez-vous que le rayon de 12px que nous configurons dans le mixin est simplement un défaut qui est transmis quand aucun paramètre n’est spécifié pendant l’appel. Vous pouvez également insérer cette classe et définir rapidement un rayon différent.
Ce code utilise toujours les différentes versions de border-radius, mais conserve automatiquement 20px comme valeur pour le rayon. Cela rend très rapide l'implémentation d'itérations personnalisées d'une propriété CSS3. Allons plus en profondeur dans le terrier du lapin et voyons comment procéder avec des propriétés plus complexes.
Mixins Variable Multiples
Border radius est un exemple simple, car il ne contient qu'une seule valeur, mais qu'en est-il des propriétés plus compliquées, telles que box-shadow?
Comme vous pouvez le voir ci-dessus, nous devons définir quatre variables différentes pour qu'elles soient uniformes dans les trois versions. Cela peut sembler compliqué, mais heureusement, cela fonctionne fondamentalement de la même façon qu'en JavaScript. Pour que l'exemple reste simple, nous allons simplement utiliser l'ombre de la boîte par défaut pour voir comment procéder.
Ici, nous définissons des variables pour les décalages horizontaux et verticaux ainsi que pour le rayon de flou et la couleur de l'ombre. Notez que ces valeurs sont toutes placées dans un seul jeu de parenthèses et séparées par des virgules. Ensuite, à l'intérieur des crochets, vous écrivez avec les variables, comme nous l'avons fait avec les nombres ci-dessus, sans virgule séparant les valeurs.
Supposons donc que nous voulions appliquer des angles arrondis, une zone d’ombre et une transition vers un élément utilisant LESS et CSS. Le code que vous utilisez ressemblerait à ceci:
Ensuite, leur implémentation serait similaire au code ci-dessous.
Comme vous pouvez le constater, nous avons appliqué les variables pour la hauteur, la largeur et la couleur de la boîte, puis les classes roundedCorners et boxShadow. Enfin, nous avons créé un événement de survol qui a fait passer la couleur d’arrière-plan de la couleur primaire à la couleur secondaire.
Règles imbriquées
L'exemple ci-dessus peut être simplifié davantage en utilisant la fonction de règles imbriquées de LESS. Regardez comment nous pouvons mettre tous les styles de boîte dans le même ensemble de supports et éliminer le besoin de saisir l'ID de div à chaque fois.
Comme vous pouvez le constater, tous les styles de lien, de survol de lien et de paragraphe de l'élément de boîte sont contenus dans le même parent.
Compilation
Je sais ce que vous pensez, tout cela va bien, mais puis-je vraiment l'utiliser? Est-ce que le chargement est plus lent que le CSS standard? Quels navigateurs le supportent?
Il s’avère que toutes ces questions et d’autres questions similaires n’importent pas vraiment. L'idée derrière LESS est d'accélérer et de simplifier seule la phase de développement. Cela signifie que ce qui sera mis en ligne sur votre site Web final doit être du vieux CSS, pas MOINS.
Une fois que vous avez fini de travailler sur votre site, il vous suffit de compiler le LESS en CSS à l'aide de votre navigateur. Pour ce faire, ouvrez simplement votre fichier HTML dans un navigateur et affichez le code source CSS. Peu importe ce que vous avez codé, vous verrez une structure CSS normale. Il suffit de copier et coller ceci dans un document CSS et vous êtes prêt à partir.
Compiler avec LESS.app
Pour rendre les choses encore plus faciles, vous pouvez complètement automatiser le processus de compilation en utilisant l’application gratuite LESS.
Tout ce que vous avez à faire est de glisser dans le dossier du projet contenant vos fichiers LESS? c'est tout! Il n'y a pas de deuxième étape. Au fur et à mesure que vous peaufinez et sauvegardez vos fichiers LESS, un nouveau fichier CSS est généré automatiquement.
Conclusion
Pour résumer, LESS peut désormais être implémenté avec seulement deux lignes de code dans votre code HTML et peut considérablement changer la façon dont vous écrivez CSS. Passez quelques mois avec LESS et vous créerez et peaufinerez des feuilles de style complexes plus rapidement que jamais.
Vous pouvez utiliser LESS pour créer des variables, effectuer des opérations sur les variables, créer des règles d'imbrication et créer des mix complexes afin de simplifier votre CSS3.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de LESS. Pensez-vous que c'est un excellent outil ou une perte de temps? Nous voulons savoir!