LESS est un préprocesseur CSS convivial et facilement accessible. Bien qu'en fin de compte, Sass et Stylus soient plus puissants et robustes, LESS possède un charme qui la maintient en tant que précurseur de la bataille des pré-processeurs.
Si vous êtes un fan de Sass, vous pouvez tirer parti de Compass, un framework incroyable qui facilite grandement le codage avec des propriétés CSS3 complexes. Mais qu'en est-il des utilisateurs MOINS? Où est leur boussole? Aujourd'hui, nous allons examiner trois superbes bibliothèques de mixages qui aideront à combler ce vide.
Quel est le problème avec LESS?
Si vous êtes l’un des codeurs CSS qui sont toujours à l’extérieur, que vous regardez les préprocesseurs CSS sans savoir si vous êtes assez habile pour en utiliser un, LESS est un excellent point de départ.
La première chose à garder à l’esprit est que les pré-processeurs codent Plus facile, même si elles semblent être une complication majeure au début. Pour commencer, rendez-vous sur le site Web LESS et téléchargez le fichier less.js.
Créez maintenant une feuille de style .less (comme une feuille de style .css, mais avec une extension différente) et déposez-la dans votre code HTML comme n'importe quelle autre feuille de style. Veillez également à déposer le fichier JavaScript.
Le fichier JavaScript se chargera automatiquement de transformer votre code MOINS en CSS que le navigateur peut lire.C'est tout! C'était indolore, non? Allez maintenant et écrivez CSS comme vous le feriez toujours dans ce fichier .less, et commencez progressivement à jouer avec d’impressionnantes fonctionnalités LESS telles que les variables et les mixins. Le fichier JavaScript se chargera automatiquement de transformer votre code MOINS en CSS que le navigateur peut lire.
Ce qu'il faut retenir, c'est que le fichier less.js est utilisé à des fins de test. Lorsque vous êtes prêt à utiliser ce meunier en direct, déposez votre fichier .less dans Less.app ou un équivalent, ce qui créera un vieux fichier CSS brut. Ce fichier CSS à la vanille est ce que vous devriez utiliser dans votre brouillon final.
Gardez vos fichiers LESS, cependant, au fur et à mesure de leur mise à jour, Less.app mettra également à jour votre fichier CSS. C'est vraiment un flux de travail très simple. Essayez, c'est beaucoup plus facile que vous ne le pensez.
Qu'en est-il de Sass?
Si vous êtes un utilisateur de Sass, félicitations, je le suis aussi. Cependant, cet article n'est pas censé être un débat MOINS vs Sass, il vous suffit donc de vous féliciter et d'aller de l'avant au lieu de me laisser des tonnes de commentaires anti-MOINS.
MOINS Mixins
Une des meilleures caractéristiques de tout préprocesseur CSS est la possibilité de créer des mixins, ce qui vous permet de lier un tas de propriétés et de valeurs personnalisables dans un joli petit paquet.
Voici un exemple:
Cela prend tout le code box-shadow et l'intègre parfaitement dans un mix unique pouvant être implémenté avec des valeurs personnalisées (ou les valeurs par défaut que nous avons utilisées ci-dessus). Maintenant, au lieu d'écrire une énorme quantité de code chaque fois que vous voulez une boîte-ombre, c'est tout ce dont vous avez besoin:
Assez génial non? Quand ce code est compilé, il crache comme du vieux CSS simple. Vous obtenez une base de code beaucoup plus lisible et facile à mettre à jour sans sacrifier la compatibilité du navigateur.
Gagnez du temps avec les bibliothèques Mixin
Comme vous pouvez l’imaginer, il existe une tonne de mixins possibles que presque tous les codeurs CSS pourraient utiliser. CSS3 est parsemé de code saturé, redondant et rempli de préfixes, ce qui est très pénible à écrire. Quelques mélanges prédéfinis pour toutes ces absurdités pourraient vous faire économiser beaucoup de temps et d’ennui lors de la création de sites Web.
"CSS3 est chargé de code saturé, redondant, rempli de préfixes et qui est vraiment pénible à écrire."Heureusement, de nombreux membres de la communauté du développement Web ont travaillé sur un tel projet. Comme je l'ai mentionné dans l'introduction, Compass est la ressource ultime pour les utilisateurs de Sass, mais le fait qu'il n'existe pas de version de Compass pour LESS ne signifie pas que vous devez passer à côté. Il existe de très bonnes bibliothèques de mixin LESS sur le marché, qui n'attendent que vous pour y participer. Regardons quelques-uns.
MOINS D'ELEMENTS
LESS Elements est l’une des premières bibliothèques de mixage LESS solides que j’ai rencontrée. En vérité, c'est assez basique, mais c'est un endroit décent pour commencer:
Mixins inclus
Less Elements est livré avec quinze mixins prédéfinis (encore une fois, très basiques). Voici ce qui est inclus:
- .pente
- .bw-gradient
- .bordé
- .drop-shadow
- .roundé
- .border-radius
- .opacité
- .transition-duration
- .rotation
- .échelle
- .transition
- .inner-shadow
- .boîte ombre
- .columns
- .Traduire
Comme vous pouvez le constater, beaucoup de vos complexités CSS3 standard sont décrites ici: dégradés, ombres, voire transitions.
Syntaxe
La syntaxe ici est assez simple, elles respectent toutes les conventions des propriétés CSS normales. Comme avec tous les mixins LESS, ils sont implémentés via la syntaxe de la période.
La critique
LESS Elements était un excellent projet qui avait beaucoup de potentiel, mais il n'a jamais vraiment réalisé ce potentiel. Si, comme moi, vous êtes en fait habitué à la combinaison étonnante de Sass et Compass, LESS Elements se sent minuscule par comparaison. Il y a tellement de choses que n'est pas ici qu'il est difficile de s'enthousiasmer pour ce qui est.
Il y a tellement de choses que n'est pas ici qu’il est difficile de s’enthousiasmer pour ce qui est.Cela étant dit, il y a des tonnes de codeurs qui préfèrent la simplicité et qui n'ont pas vraiment besoin de fluff supplémentaire, alors cela pourrait quand même plaire à cette foule.
Au-delà du fait que LESS Elements est si fondamental, se trouve la triste vérité qui, autant que je sache, n’a pas été touchée depuis un an. Étant donné que CSS continue d'évoluer à mesure que de nouvelles fonctionnalités sont implémentées et que les anciennes fonctionnalités atteignent enfin le statut de navigateur multi-navigateur, il est très risqué de baser votre flux de travail sur un outil lui-même stagnant.
En fin de compte, il y avait du bon travail ici, mais je pense que nous pouvons faire mieux.
MOINS Chapeau
Les personnes extraordinaires qui nous ont amené CSS Hat viennent de sortir LESS Hat, une bibliothèque de mixins LESS impressionnante et moderne. Après avoir regardé autour de eux, ils ne trouvèrent pas une source décente pour les mixins LESS, ils créèrent donc le leur!
Mixins inclus
Dix-neuf mixins sont inclus avec LESS Hat, avec des images clés (la vingtième) en cours de route. Comme vous pouvez le constater, il couvre à peu près tout ce que nous avons vu dans LESS Elements et plus encore:
- .animation
- .keyframes (à venir)
- .apparence
- .backface-visibilité
- .background-clip
- .background-origine
- .background-size
- .border-radius
- .border-image
- .boîte ombre
- Taille de la boîte
- .columns
- .font-face
- .pente
- .opacité
- .la perspective
- .Taille
- .transformer
- .transition
- .user-select
En fait, ils sont si fiers de leur ensemble de fonctionnalités qu'ils n'ont pas peur de le comparer à LESS Elements et même à Compass.
Comme vous pouvez le constater, MOINS de chapeau, ce sont les genoux des abeilles. Les points forts que vous allez adorer incluent la possibilité d'implémenter plusieurs dégradés sans se soucier de la syntaxe ancienne, des ombres de boîte illimitées, des transformations 3D et même de la prise en charge de @ font-face.
Syntaxe
La syntaxe de LESS Hat est en fait un peu bizarre. Vous remarquerez cela en particulier sur les propriétés où vous pouvez implémenter plusieurs instances d'une propriété, comme avec plusieurs ombres de boîtes.
Comme vous pouvez le constater, vous avez des guillemets et le symbole ~ à traiter en plus de la syntaxe typique entre parenthèses. Que se passe t-il ici?
La réponse est assez compliquée. Cela se résume au fait que LESS lui-même ne joue pas aussi bien avec la syntaxe permettant d'inclure plusieurs instances de propriété. Pour gérer cela, ils prennent l'entrée comme une chaîne échappée, puis l'analysent dans chaque mixin. Vous pouvez en savoir plus à ce sujet ici.
La critique
LESS Hat représente l’une des meilleures ressources tierces MOINS que j’ai vue à ce jour. Beaucoup d'efforts considérables ont été déployés ici et le résultat est vraiment formidable. Si les gars de CSS Hat suivent le rythme, cela pourrait devenir un must pour les utilisateurs de MOINS.
Les critiques ici ont déjà été largement adressées. Ce serait bien de voir le support des images clés, mais comme cela devrait arriver bientôt, ce ne sera pas un problème à long terme. La syntaxe réduit la nature conviviale de LESS, mais elle semble être un mal nécessaire si vous souhaitez utiliser le type de fonctionnalités proposé par LESS Hat.
Twitter Bootstrap et Preboot
Twitter Bootstrap est un framework frontal extrêmement populaire né du formidable travail du développeur de Twitter, Mark Otto. À la base, Bootstrap est construit et maintenu sur une base LESS, pas de CSS pur.
Étant donné que Bootstrap est un ensemble d'outils aussi étonnant et incroyablement vaste, il constitue l'une des collections les plus impressionnantes de ressources MOINS jamais créées.
Qu'en est-il du pré-lancement?
Historiquement, Mark Otto a travaillé sur un projet appelé Preboot.less, qui était une collection de mixins LESS. Ce projet a évolué et a été intégré à Bootstrap, alors regardez-le plutôt (Mark m'a confirmé que Preboot est maintenant un projet stagnant).
Bootstrap & LESS
Vous voulez MOINS de fichiers? Vous les avez. Bootstrap est actuellement livré avec quarante fichiers .less, qui contrôlent tous ses aspects et fonctionnalités.
"Si vous cherchez quelque chose qui soit vraiment à la hauteur de la profondeur et de la largeur de Compass, Bootstrap est votre réponse." Si nous comparons strictement aux deux bibliothèques précédentes que nous utilisions auparavant, nous voudrons jeter un coup d'œil au fichier mixins.less. Vous trouverez ici des mixins pour les dégradés, l'opacité, les ombres, la solution de correction, le système de grille et bien plus encore. Si vous cherchez quelque chose qui soit vraiment à la hauteur de la profondeur et de la largeur de Compass, Bootstrap est votre réponse.
La critique
Comme vous pouvez le constater dans mes précédents articles, je suis un grand fan de Bootstrap. C'est une ressource vraiment solide et un excellent moyen pour Twitter de contribuer à la communauté des développeurs.
"Tous ces excellents mixins sont inclus dans Bootstrap, mais pour autant que je sache, ils n'apparaissent pas vraiment dans la documentation actuelle."Mon principal atout ici est que tous ces excellents mixins sont inclus dans Bootstrap, mais pour autant que je sache, ils ne figurent pas vraiment dans la documentation actuelle. S'ils le font, je ne peux certainement pas les trouver, ce qui reste une plainte majeure.
D'autres ressources, telles que LESS Hat, LESS Elements et Compass, répertorient clairement les mixins inclus avec des exemples de syntaxe, de code d'implémentation et de résultat final. Nous avons besoin de quelque chose comme ça pour les mixins Bootstrap. Peut-être sont-ils vraiment uniquement destinés aux éléments de l'interface utilisateur Bootstrap, mais où est le plaisir?
Quel est le meilleur?
Je pense qu'il est assez évident que LESS Hat et Bootstrap jettent le pantalon de LESS Elements, mais entre les deux, lequel est le meilleur? La réponse dépend bien sûr de ce dont vous avez besoin.
Bootstrap n'est pas une liste de mixins, c'est un énorme framework avec une tonne de ressources.Si vous cherchez juste une poignée de mixins, vous pouvez toujours télécharger Bootstrap et récupérer le fichier mixins.less, mais même cela pourrait être un peu lourd pour vos besoins.
En revanche, LESS Hat a une empreinte beaucoup plus petite et ne cherche pas à être un cadre étendu. Il a le moins de mixins dont vous avez besoin et rien d'autre.
En bout de ligne, si vous cherchez à redéfinir et à systématiser complètement la façon dont vous créez des sites Web, consultez Bootstrap. Cependant, si vous êtes juste un utilisateur MOINS à la recherche de mixins, je vous recommande vivement de consulter LESS Hat.
Si vous êtes un utilisateur MOINS, utilisez-vous des bibliothèques mixin? Faites le nous savoir dans les commentaires.