Travailler efficacement avec LESS Tips and Tools
Dans notre précédent tutoriel, nous avons appris à utiliser LESS de manière pratique en utilisant des applications telles que ChrunchApp pour compiler le code. Cette fois, nous allons passer en revue quelques astuces utiles qui permettront d’améliorer nos performances et notre productivité lors de la compilation de la syntaxe LESS. Nous allons configurer notre environnement de travail / bureau en activant la coloration syntaxique pour notre éditeur actuel, en utilisant des outils de compilation automatiques et en utilisant des Mixins prédéfinis, puis en les synchronisant tous ensemble..
Eh bien, si vous êtes prêt, commençons.
Avertissement: Les conseils expliqués ci-dessous sont dérivés de mes expériences quotidiennes en tant que concepteur Web. Avant de poursuivre, j’aimerais préciser que les astuces peuvent convenir à certains designers et non à d’autres; comme toute autre astuce trouvée sur le Web. Néanmoins, j'espère que vous pourrez tirer quelque chose d'utile des conseils suivants..
1. Surligneur Code
Comme nous l'avons mentionné précédemment, nous vous avons présenté ChrunchApp. Cependant, cette application pourrait ne pas être la préférence de tous les concepteurs de sites Web; parce que chaque concepteur a son propre environnement de travail, y compris l'éditeur de code de son choix.
Plutôt que d’installer un autre éditeur de code, vous pouvez toujours utiliser votre éditeur actuel et activer la coloration syntaxique. Dans cet article, je vais donc partager quelques astuces pour ajouter du code LESS en surbrillance à deux éditeurs de texte célèbres: Sublime Text 2 et Bloc-notes++.
Sublime Text 2
Cet éditeur est actuellement mon choix préféré pour m'aider à composer des codes. Cette application est disponible pour Windows, Linux et OSX. Quel que soit votre système d'exploitation, vous pourrez toujours suivre ce conseil..
Maintenant, téléchargeons-le sur son site officiel et essayons cet éditeur. Ensuite, lisez les instructions suivantes pour activer la coloration LESS en moins.
Remarque: Assurez-vous d'avoir lu la licence avant de télécharger, car la version gratuite est uniquement destinée à l'évaluation..
Installer la console de package
Tout d’abord, ouvrez votre Sublime Text 2 et affichez la console à partir de ce menu. Affichage> Afficher la console
Ensuite, copiez et collez la ligne de commande suivante dans la console, puis appuyez sur Entrée pour installer le contrôle du paquet à partir de wBond.net:
importer urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) sinon os.path.exists (ipp) else Aucun; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); open (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). read ()); print 'Veuillez redémarrer Sublime Text pour achever l'installation' 
Ce Console de package va nous aider à installer le paquet en surbrillance.
Installation du package de surbrillance LESS
Redémarrez le texte Sublime 2 et affichez la palette de commandes à partir de ce menu. Outils> Palette de commandes. Attendez que la liste de paquets soit entièrement chargée. Ensuite, tapez Installer le paquet rechercher et charger des référentiels de paquets.
Ensuite, recherchez le package LESS dans la liste des référentiels et appuyez sur Entrée..
Attendez une minute pour que Sublime Text 2 télécharge et installe le package jusqu'à ce que la notification suivante apparaisse sur la barre d'état.
Aller au menu Voir> Syntaxe, vous devriez voir MOINS sur la liste. Cela signifie que le Sublime Text 2 soutient .Moins et votre syntaxe MOINS devrait également avoir une couleur en surbrillance appropriée maintenant.
Bloc-notes++
Notepad ++ est un éditeur de code gratuit et Open Source, et dispose de nombreux plug-ins utiles pour étendre ses fonctionnalités. Il est également largement utilisé par de nombreux concepteurs / développeurs Web, en particulier ceux qui travaillent avec le système d’exploitation Windows. Donc, je décide d'inclure également le conseil pour ajouter moins de texte en surbrillance pour cela.
Installer LESS-highlight dans le Bloc-notes++
Activer le surlignage des couleurs LESS dans Notepad ++ est assez facile.
Commencez par télécharger le package LESS pour Notepad ++ à partir de ce lien (userDefineLang_LESS.xml). Ensuite aller à Affichage> Dialogue défini par l'utilisateur.
La boîte de dialogue suivante ci-dessous apparaîtra. Clique le Importation… bouton et localisez votre téléchargé .xml fichier. Ensuite, redémarrez le Bloc-notes++.
Ouvrez votre fichier .less et allez au menu Langue. Vous devriez maintenant voir MOINS inclus. Sélectionnez-le pour appliquer la mise en surbrillance des couleurs sur votre syntaxe LESS.
Plus de ressources
Il existe de nombreux autres éditeurs sur le marché. Donc, ici nous incluons des liens utiles pour vous si vous n’utilisez aucun des éditeurs ci-dessus.
Adobe DreamWeaver
Sans aucun doute, Dreamweaver dispose d'une base d'utilisateurs considérable. Il est disponible pour Mac et Windows. Donc, si vous utilisez cet éditeur, voici l’une des bonnes sources pour installer MOINS en surbrillance dans Adobe DreamWeaver..
Coda
Si vous utilisez Mac, vous connaissez probablement Coda, cet éditeur est l’un des plus populaires parmi les utilisateurs de Mac. Et, voici comment vous pouvez installer LESS dans Coda.
Geany
C'est l'un des éditeurs de code les plus populaires parmi les utilisateurs de Linux. Certains ordinateurs de mon bureau fonctionnant sous Linux utilisent également Geany. Donc, si vous l'utilisez aussi, vous pouvez inclure la surbrillance MOINS en suivant ces instructions sur SuperUser.com
2. MOINS Compilateur
Contrairement à ChrunchApp qui a un compilateur LESS intégré, les autres éditeurs ne l’auront pas par défaut. Bien qu'il existe quelques moyens de l'inclure, mais c'est plutôt technique pour les utilisateurs généraux. Donc la meilleure solution que j'ai est de faire la compilation en utilisant les outils suivants: WinLESS ou MOINS.app. WinLESS est un compilateur conçu pour Windows, tandis que LESS.app est conçu pour OSX..
Ces outils peuvent convertir automatiquement notre code MOINS en un CSS statique, car nous enregistrons le fichier et signalons directement s'il y a une erreur dans le code. Eh bien, laissez-moi vous montrer à quel point cet outil est polyvalent:
Tout d'abord, je voudrais télécharger WinLESS et l'installer.
Cliquez sur le bouton Ajouter un dossier et localisez le répertoire où vous avez placé votre .Moins fichiers (je suppose que vous en avez déjà créé au moins un). Une fois que vous en ajoutez un; WinLESS va scanner et trouver tous .Moins fichiers et vous montrer sur la liste.
Aller au menu Fichier> Paramètre, et assurez-vous que ces options sont cochées;
- Compiler automatiquement les fichiers une fois enregistrés
- Afficher le message sur la compilation réussie
Nous pouvons également définir le dossier de sortie, au cas où nous voudrions le sauvegarder ailleurs. Mais, dans cet exemple, nous allons laisser cette option telle quelle; ce qui signifie que le fichier de sortie sera sauvegardé dans le même répertoire que le .Moins fichier.
Ouvrez votre .Moins fichier du répertoire ajouté, apportez quelques modifications et enregistrez-le.
WinLESS vous avertira lorsque le fichier aura été compilé avec succès dans .css ou s'il y a une erreur dans les codes. De cette façon, vous pouvez vérifier directement la sortie .css, sans avoir à attendre que les codes soient complétés pour la compiler..
Si vous utilisez Mac, vous pouvez utiliser LESS.app ayant la même fonctionnalité que WinLESS..
Mixins prédéfinis
Dans les pratiques modernes de conception Web, nous utiliserons des propriétés CSS3 telles que Gradient, Ombre ou Rayon de la bordure qui ressemblent à ceci:
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
ou
arrière-plan: -moz-linear-gradient (haut, # f0f9ff 0%, # a1dbff 100%); arrière-plan: -webkit-linear-gradient (haut, # f0f9ff 0%, # a1dbff 100%); arrière-plan: -o-linear-gradient (haut, # f0f9ff 0%, # a1dbff 100%); arrière-plan: -ms-linear-gradient (haut, # f0f9ff 0%, # a1dbff 100%); arrière-plan: dégradé linéaire (haut, # f0f9ff 0%, # a1dbff 100%);
Dans notre précédent tutoriel, nous avons créé des Mixins pour simplifier cette syntaxe. Heureusement, certains membres de la communauté des concepteurs de sites Web sont vraiment assez généreux pour ménager leur temps pour compiler ces mixins utiles, de sorte que nous n’ayons pas besoin de les compiler nous-mêmes à partir de zéro..
Et un de mes préférés est Less Elements qui contient de nombreuses règles prédéfinies CSS3 utiles. Ainsi, nous écrivons maintenant moins de lignes de code à partir de préfixes de fournisseurs fastidieux.
Bon, voyons maintenant comment tous ces conseils peuvent vraiment aider.
Les mettre tous ensemble
Dans cet exemple, je vais créer un bouton de lien simple. Premièrement, j'aimerais créer un nouveau document HTML et mettre la balise suivante:
MOINS Cliquez moi
Créer un styles.less en tant que notre feuille de style LESS principale, enregistrez-le dans le même dossier que notre document HTML et ajoutez le dossier à WinLESS.
Importer le elements.less nous avons téléchargé avant d'utiliser cette syntaxe:
@import "elements.less";
Maintenant, nous pouvons utiliser tous les Mixins fournis par elements.less comme .pente, .arrondi, et .bordé. Je suis sûr que le nom de Mixins est assez explicite.
Ensuite, mettez les règles LESS ci-dessous, dans votre feuille de style. Et, sauvez-le encore
un display: inline-block; rembourrage: 10px 20px; couleur: # 555; texte-décoration: aucun; .bw-gradient (#eee, 240, 255); arrondi; .bordé; &: hover .bw-gradient (#eee, 255, 240);
Depuis notre .Moins fichier a été ajouté à WinLESS, il sera automatiquement compilé dans .css. Voyons maintenant les résultats.
Eh bien, ce n’est pas si mal, n’est-ce pas, étant donné que ce bouton a été créé avec moins de lignes que nécessaire. Et, voici le CSS statique généré:
un display: inline-block; rembourrage: 10px 20px; couleur: # 555; texte-décoration: aucun; fond: #eeeeee; arrière-plan: -webkit-gradient (linéaire, en bas à gauche, en haut à gauche, stop de couleur (0, # f0f0f0), stop de couleur (1, #ffffff)); arrière-plan: -ms-linear-gradient (en bas, # f0f0f0 0%, # f0f0f0 100%); arrière-plan: -moz-linear-gradient (centre en bas, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-background-clip: rembourrage; -webkit-background-clip: zone de remplissage; clip d'arrière-plan: padding-box; border-top: solide 1px #eeeeee; border-left: solid 1px #eeeeee; border-right: 1px solide #eeeeee; border-bottom: solide 1px #eeeeee; a: hover background: #eeeeee; arrière-plan: -webkit-gradient (linéaire, en bas à gauche, en haut à gauche, stop de couleur (0, #ffffff), stop de couleur (1, # f0f0f0)); arrière-plan: -ms-linear-gradient (en bas, #ffffff 0%, #ffffff 100%); arrière-plan: -moz-linear-gradient (centre en bas, #ffffff 0%, # f0f0f0 100%);
En résumé
Voici un résumé rapide de ce que nous avons discuté dans ce post:
- En activant la surbrillance de la syntaxe dans notre éditeur actuel, il n'est pas nécessaire d'installer un éditeur supplémentaire uniquement pour composer la syntaxe LESS; cela peut vous faire économiser de l'espace / de la mémoire sur votre disque.
- Nous n'avons également plus besoin de télécharger et de lier la bibliothèque LESS.js dans notre section head HTML, comme nous l'avions fait dans notre dernier tutoriel. De cette façon, notre document HTML reste propre et soigné.
- L'utilisation d'outils de compilation tels que WinLESS et LESS.app peut générer instantanément la sortie CSS statique. Donc, s'il y a quelque chose qui ne va pas avec la syntaxe, nous pouvons l'examiner immédiatement.
- Des mixins prédéfinis comme LESS Elements sont notre meilleur ami. Cela peut vraiment nous faire gagner du temps lors de la compilation de propriétés fastidieuses en CSS3.
.
