Préprocesseurs CSS comparés Sass vs LESS

Il existe un certain nombre de CSS CSS, préprocesseur, LESS, Sass, Stylus et Swith, pour ne citer que quelques exemples.. Préprocesseur CSS, Comme nous l'avons souvent dit, l'objectif premier de la création de CSS est plus dynamique, organisé et productif. Mais, la question est de savoir lequel d'entre eux fait le travail le mieux?

Bien sûr, nous ne regarderions pas chacun d'entre eux, nous ne comparerons que deux des plus populaires: Sass et MOINS. Pour décider, nous comparerons les deux facteurs sur sept: celui qui obtient les meilleurs résultats obtient un point; en cas d'égalité, les deux se verront attribuer un point.

Commençons.

Installation

Commençons par l'étape très fondamentale, Installation. Sass et LESS reposent tous les deux sur une plate-forme différente. Sass s’appuie sur Ruby, tandis que LESS est une bibliothèque JavaScript était en fait aussi construit sur Ruby en premier).

Toupet: Sass a besoin de Ruby pour fonctionner. Sous Mac, cela a été pré-installé, mais sous Windows, vous devez probablement l’installer avant de pouvoir commencer à jouer avec Sass. En outre, Sass doit être installé via le terminal ou une invite de commande. Il existe plusieurs applications graphiques que vous pouvez utiliser sur place, mais elles ne sont pas gratuites..

MOINS: LESS est construit sur JavaScript. LESS est donc aussi simple que lier une bibliothèque JavaScript à votre document HTML. Il existe également quelques applications graphiques permettant de compiler LESS au format CSS. La plupart d’entre elles sont gratuites et fonctionnent très bien (par exemple, WinLess et LESS.app)..

Conclusion: LESS est clairement en tête.

Les extensions

Sass et LESS ont tous deux des extensions pour un développement Web plus rapide et plus facile.

Toupet: Dans notre dernier message, nous avions discuté de Compass, l’extension actuelle et populaire basée sur Sass. Compass a un certain nombre de Mixins pour écrire la syntaxe CSS3 en moins de temps.

Mais Compass ne se limite pas aux CSS3 Mixins, il a ajouté d’autres fonctionnalités très utiles telles que les aides, la mise en page, la typographie, la mise en grille et même les images Sprite. Cela a aussi config.rb fichier où nous pouvons contrôler la sortie CSS et certaines autres préférences. En bref, Compass est un package tout-en-un pour le développement Web avec Sass..

MOINS: LESS possède également plusieurs extensions, mais contrairement à Compass qui regroupe tout ce dont nous avons besoin au même endroit, elles sont séparées et chacune d’elles est construite par des développeurs différents. Ce ne sera pas un problème pour les utilisateurs chevronnés, mais pour ceux qui débutent avec LESS, ils doivent prendre le temps de choisir les extensions qui conviennent à leur flux de travail..

Voici quelques extensions MOINS que vous devrez peut-être inclure dans votre projet:

CSS3 Mixins: LESS Elements, Preboot, LESS Mixins.
la grille: 960.gs, Sans cadre, Sémantique.gs
Disposition: Encore moins
Misc: Twitter Bootstrap

Conclusion: Je pense que nous devons convenir que Sass et Compass sont un excellent duo et que la fonction d’image Sprite est vraiment géniale. Un point pour Sass ici.

Les langues

Chaque préprocesseur CSS a son propre langage et ils sont généralement communs. Par exemple, Sass et LESS ont des variables, mais il n’ya pas de différence significative, sauf que Sass définit les variables avec un $ signer alors que MOINS le fait avec un @ signe. Ils font toujours la même chose: stocker une valeur constante.

Ci-dessous, nous allons examiner quelques-unes des langues les plus couramment utilisées à la fois en Sass et en LESS (selon mon expérience).

Nidification

La règle d'imbrication est une bonne pratique pour éviter d'écrire des sélecteurs de manière répétée et Sass et LESS ont les mêmes règles d'imbrication.

Sass / Scss et LESS

 nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; ul remplissage: 0; marge: 0;

Mais Sass / Scss va plus loin dans cette méthode en nous permettant également d'imbriquer des propriétés individuelles, voici un exemple:

 nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; ul remplissage: 0; marge: 0;  frontière: style: solide; gauche: largeur: 4px; couleur: # 333333;  right: width: 2px; couleur: # 000000;

Ce code va générer la sortie suivante.

 nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; style de bordure: solide; border-left-width: 4px; border-left-color: # 333333; border-right-width: 2px; border-right-color: # 000000;  nav ul padding: 0; marge: 0;

Conclusion: L'imbrication de propriétés individuelles est un ajout intéressant et est considérée meilleur entrainement, surtout si nous suivons le principe DRY (Don't Repeat Yourself). Donc, je pense qu'il est clair lequel va mieux dans ce cas.

Mixins et l'héritage de sélecteur

Les mixins dans Sass et LESS sont définis un peu différemment. En Sass, nous utilisons le@mixin directive alors que dans MOINS nous le définissons avec le sélecteur de classe. Voici un exemple:

Sass / Scss

 @mixin border-radius ($ values) border-radius: $ values;  nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; @include border-radius (10px);

MOINS

 .border (@radius) border-radius: @radius;  nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; .border (10px);

Mixins, en Sass et LESS, est utilisé pour comprendre propriétés d'un jeu de règles à un autre jeu de règles. Dans Sass, cette méthode est poussée plus loin avec Sélecteur Héritage. Le concept est identique, mais au lieu de copier toutes les propriétés, Sass étendra ou regroupera les sélecteurs ayant les mêmes propriétés et valeurs à l'aide de la commande @étendre directif.

Jetez un oeil à cet exemple ci-dessous:

 .circle border: 1px solid #ccc; border-radius: 50px; débordement caché;  .avatar @extend .circle;

Ce code donnera le résultat suivant:

 .cercle, avatar bordure: 1px solide #ccc; border-radius: 50px; débordement caché;

Conclusion: Sass a une longueur d'avance sur l'héritage de Mixins et de Selectors.

Des opérations

Sass et LESS peuvent effectuer des opérations mathématiques de base, mais ils renvoient parfois des résultats différents. Voyez comment ils effectuent ce calcul aléatoire:

Sass / Scss

 $ marge: 10px; div margin: $ margin - 10%; / * Erreur de syntaxe: unités incompatibles: '%' et 'px' * /

MOINS

 @margin: 10px; div margin: @margin - 10%; / * = 0px * /

Conclusion: Sass, dans ce cas, le fait avec plus de précision; comme% et px ne sont pas équivalents, cela devrait renvoyer une erreur. Bien que j'espère réellement que cela peut être quelque chose comme 10px - 10% = 9px.

Notifications d'erreur

La notification d'erreur est importante pour voir ce que nous faisons mal. Imaginez des milliers de lignes de code et une infime erreur quelque part dans le chaos. Un clair notification d'erreur sera le meilleur moyen de comprendre rapidement le problème.

Toupet: Dans cet exemple, j'utilise l'invite de commande pour exécuter le compilateur. Sass générera une notification d'erreur chaque fois que le code est invalide. Dans ce cas, nous supprimerons un point-virgule sur la ligne 6, ce qui devrait entraîner une erreur. Regardez la capture d'écran ci-dessous.

Quand j'ai vu cette notification pour la première fois, je pouvais à peine la comprendre. En outre, il semble que Sass soit légèrement à l’erreur. Il a dit que l'erreur est sur ligne 7, au lieu de 6.

MOINS: Avec le même scénario d'erreur, la notification LESS est mieux présentée et semble également plus précise. Regardez cette capture d'écran:

Conclusion: MOINS offre une meilleure expérience en la matière et gagne haut la main.

Documentation

La documentation est une partie très cruciale pour chaque produit; même les développeurs expérimentés auraient du mal à faire les choses sans Documentation.

Toupet: Si nous regardons la documentation sur le site officiel, personnellement, je me sens comme si je me trouvais au milieu d’une bibliothèque, la documentation est très complète. Pourtant, l'apparence, si cela compte pour vous, n'est pas une motivation pour la lecture, plus le fond est blanc.

La présentation ressemble beaucoup plus à la documentation W3 ou à WikiPedia. Je ne sais pas si c'est la norme d'affichage de la documentation sur Internet, mais ce n'est pas le seul moyen.

MOINS: D'autre part, la documentation LESS est plus claire sans trop d'explications textuelles, et elle plonge directement dans les exemples. C'est aussi une bonne typographie et un meilleur jeu de couleurs. Je pense que c’est la raison pour laquelle LESS a tout d’abord attiré mon attention et je peux l’apprendre plus rapidement grâce à la présentation et à la présentation de la documentation..

Conclusion: La présentation de la documentation LESS est meilleure, bien que Sass ait une documentation plus complète, je pense donc que nous pouvons appeler celui-ci un lien.

Pensée finale

Je pense que c'est une conclusion claire que Sass est meilleur avec un score total de 5 contre 3 pour moins. Cependant, cela ne signifie pas que LESS est mauvais; ils ont juste besoin d'être meilleurs. En fin de compte, il appartient toujours à l'utilisateur final de choisir le préprocesseur de son choix. Que ce soit Sass ou LESS, tant qu'ils sont à l'aise et plus productifs, alors c'est le gagnant dans leur liste.

Enfin, si vous avez quelque chose à l'esprit sur ce sujet, n'hésitez pas à le partager dans la zone de commentaire ci-dessous..