Sass ou Less

Bonjour,

J'aimerais avoir vos retours d'expérience / d'utilisation de Less ou de Sass.

Quels sont les paramètres à prendre en compte pour choisir entre les 2 ?

Par avance merci !

Très succinctement, considère que ça fait globalement la même chose (avec un peu plus de possibilités avec Sass mais au prix d’une courbe d’apprentissage moins douce).


Modifié par Vincent Valentin (09 Dec 2011 - 16:10)

Merci Vincent !

Tu utilises Sass toi ?
Moins douce car moins de doc, non ?

Non moi j'ai fais le choix de Less, car :

- il n’existait pas à l'époque de compilateur aussi simple que LessApp côté Sass (ou du moins je ne le connaissait pas) ;
- je travaille en équipe et il me semblait important que ce soit largement adopté car simple à mettre en place – plutôt que rejeté car trop compliqué ;
- je ne voyais pas de nécessité à introduire des opérateurs logiques dans mes feuilles de styles.
Modifié par Vincent Valentin (12 Dec 2011 - 20:32)

Less est un très bon préprocesseur, mais il ne faut pas le sur-estimer comparé à Sass, qui est bien plus puissant.

Ok sous windows je comprends que l'on se laisse tenter plus facilement par Less (plus simple à implémenter).

Par contre en y passant un peu de temps on peut profiter de Sass et là c'est le top.

Pour installer Sass sur Mac OS, il suffit de saisir : "sudo gem install sass compass" dans le terminal. Sous Windows, il faut installer ruby : http://rubyinstaller.org/ (ça prend 2 minutes), puis saisir "gem install sass compass".

Couplé à Compass (un meta framework pour Sass), on a accès à un nouveau style de développement, incomparable à Less où il faut tout faire soi-même (importer ses mixins fait maison… les mettre à jour à la main…).

Je citerai quelques fonctions de Sass + Compass que Less ne possède pas :

- Un système de débug beaucoup plus simple (avec Less on ne sait pas trop d'où vient une erreur quand on se sert du parser JS)
- La propriété @extend
- Le référenceur de parent (ex. : .parent { .element & {…} } sera compilé en .parent .element {…}, ce qui permet d'avoir un code plus DRY)
- Les sprites automatiques
- Le cache buster (avec le helper image-url('image.png') qui compile en url('image.png?12345678') pour toujours servir la dernière version du fichier)
- Les helpers CSS3 intégrés http://compass-style.org/reference/compass/css3/
- Le générateur de grilles (configurable)
- L'intégration d'images "inline" en data, directement dans le code css

Bref pas mal de possibilités offertes par le combo Sass + Compass à ne pas négliger.

Suite à cette débauche d'arguments, je ne demande que des exemples concrets moi (là c’est un peu trop obscur si on n’est pas dedans j’ai l’impression) !
Tu peux m’en dire plus Kaelig ? (Ne serait-ce que pour ma culture personnelle.)

Je pense que c'est un appel à écrire un billet sur le sujet

Promis je me le note pour la semaine prochaine. En plus ça pourra faire une bonne introduction à un "pourquoi Sass et pas Less" dans mon ouvrage sur le sujet.

Hop, un abonné de plus à ton fil RSS.

(Mais je reste persuadé de la simplicité d’adoption de Less )
Modifié par Vincent Valentin (12 Dec 2011 - 23:36)

J'attend avec impatience ton billet Kaelig !
Qui sait Vincent, il te fera peut-être changé d'avis !

Kaelig, pourrais-tu agrémenter ton futur article d'un exemple d'une page web crée avec Sass et Compass ?

Bonjour,

SASS j'ai ouvert une doc, j'ai rien compris. Le lendemain j'ai rouvert la doc, j'ai trouvé ça super compliqué même pour pas grand chose, j'ai quand même vu qu'on pouvait aller très loin avec, j'ai refermé la doc. Bref j'ai choisi LESS

Pour ce qui concerne alsacreations.fr, on vient d'utiliser pour la première fois LESS pour un projet où on était chargé de l'intégration statique de http://www.orientation-pour-tous.fr/
Les contraintes étaient : une charrette en mode hardcore, travail en équipe, 2H maxi pour former chacun (ou sinon on utilisait CSS).
On a fait le choix d'utiliser LessPHP donc peu importe l'OS ; le CSS est recompilé à chaque chargement de page.
J'ai perdu 2H avant de comprendre que les paramètres des fonctions sont séparés par des points-virgule ; et pas par des virgules , comme en LESS classique.
J'ai pas aimé le fait que les modifications d'un fichier LESS inclus dans un autre (@import) n'étaient pas prises en compte par LessPHP; il fallait modifier le fichier principal (ajouter un(e) espace, enregistrer) pour qu'il daigne le recompiler avec tous les autres fichiers inclus ...

Syntaxe :
- elle est compréhensible par tout intégrateur "débrouillard" ou expérimenté (débrouillard pour moi c'est bien plus que d'avoir compris la cascade et les priorités des sélecteurs, c'est avoir plusieurs mois de pratique)
- on est pas forcé de l'utiliser : un fichier 100% CSS est un fichier LESS valide. On peut au départ dire à quelqu'un d'intégrer du CSS classique sans imbrication ni rien et revenir plus tard dessus
- imbrication compatible avec les sélecteurs avancés et performants genre > (enfant) ou + (frère). C'est pas dans la doc mais suffisait que j'essaie pour découvrir que ça fonctionnait.

.parent {
    color: red;
    + frère {
        color: blue;
    }
    >.enfant {
        color: yellow;
    }
}

- la feuille de style doit rester relativement propre, ça fait bizarre de voir une erreur PHP au lieu de rien graphiquement ! Pas trop de messages d'erreur pertinents à part la ligne où ça plante. Un filtre IE DXtruc plus compliqué que les autres m'a résisté, pas moyen d'échapper la chaîne (ou le tilde ?) mais bah c'est MS, leur passé nous hantera longtemps.
- on peut être tenté d'imbriquer les blocs jusqu'à la 13e génération mais ça gonfle le poids du fichier CSS et ralentit (un peu) le rendu dans les navigateurs. Si on peut, il faudra toujours préférer ceci :

ul {
    margin: 0;
    li {
        display: inline;
    }
    a {
        color: white;
        background-color: black;
    }
}

et pas le bloc a { } dans celui de li { } à moins que le poids des sélecteurs ne l'y oblige.
- petit regret : les fonctions et cie ne sont là que pour remplacer des blocs entiers d'instructions, des instructions ou des valeurs (surtout). Pas moyen de l'utiliser pour les propriétés CSS. Bon ça m'a forcé à rester KISS, c'est pas forcément un mal (si c'est pour que du CSS soit autant compréhensible qu'un script Perl ou qu'une RewriteRule ... mmh non ). De mémoire, c'était pour la sainte trinité de l'accessibilité truc:focus,truc:hover,truc:active ... je vais en faire un snippet ZenCoding tiens.
- elle est la plus proche possible de CSS et pas d'un langage de programmation côté serveur, nickel.

http://lesselements.com/ a vieilli mais l'idée est indispensable pour un site avec pas mal de CSS3 ; on s'occupe UNE fois des vendor prefix et ensuite plus du tout. Modifier un gradient nécessite 2 modifications, pas 12. Faudrait peut-être qu'on sorte une version actualisée ...

Vidéo sur LESS à la Kiwiparty http://www.dailymotion.com/video/xj00ry_less-moins-de-css-plus-de-fun-kiwi-party-2011_tech par Corinne, mon ancienne collègue
Firebug, ça et ZenCoding c'est effectivement plus fun pour intégrer

Héhé en effet la doc est imbuvable à première vue.

Pas pire que celle de Closure Stylesheets, mais pas loin !

Pourquoi Sass est plus puissant une fois pris en main ?

Je vais illustrer mon propos avec un exemple : tu aurais pu éviter la répétition de ce code (que l'on retrouve 7 fois dans la css du site que tu as intégré avec Less) grâce à @extend.

  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(239,85,39,1)),color-stop(100%,rgba(192,0,0,1)));
  background:-webkit-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:-moz-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:-ms-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:-o-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef5527',endColorstr='#c00000',GradientType=0);

Le gain sur la taille d'une CSS est plutôt appréciable quand on a beaucoup de CSS3 préfixé.

En gros tu crées une classe :

.mon-dégradé {
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(239,85,39,1)),color-stop(100%,rgba(192,0,0,1)));
  background:-webkit-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:-moz-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:-ms-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:-o-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef5527',endColorstr='#c00000',GradientType=0);
}

Puis tu l'étends dès que tu souhaites l'utiliser :

.gd_primary { @extend .mon-dégradé;} 

Le code compilé donnera ça :

.gd_primary,
.mon-dégradé {
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(239,85,39,1)),color-stop(100%,rgba(192,0,0,1)));
  background:-webkit-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:-moz-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:-ms-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:-o-linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  background:linear-gradient(top,rgba(239,85,39,1) 0%,rgba(192,0,0,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef5527',endColorstr='#c00000',GradientType=0);
}

En soi, Sass n'est pas "beaucoup" plus puissant que Less. Par contre il devient trèèèès pratique une fois combiné à Compass : http://compass-style.org/

Ensuite avec l'aide du module images et dégradés de compass (cf démo ici : http://compass-style.org/examples/compass/css3/gradient/ ), on peut encore simplifier le code :

.mon-dégradé {
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(rgba(239,85,39,1), rgba(192,0,0,1)));
}

Compilé (avec support des dégradés SVG pour IE activé) :

.mon-degrade {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmNTUyNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2MwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ef5527), color-stop(100%, #c00000));
  background-image: -webkit-linear-gradient(#ef5527, #c00000);
  background-image: -moz-linear-gradient(#ef5527, #c00000);
  background-image: -o-linear-gradient(#ef5527, #c00000);
  background-image: -ms-linear-gradient(#ef5527, #c00000);
  background-image: linear-gradient(#ef5527, #c00000); }

Pour avoir testé en production les 2 langages, je peux attester que dans tous les cas vous ne pourrez plus vous passer d'un préprocesseur si vous commencez à en utiliser un, que ce soit Sass ou Less.

En revanche, quand on commence à tirer parti des fonctionnalités de Sass+Compass, il est très frustrant de repasser sous Less.

Enfin, si vous travaillez dans un environnement Ruby On Rails, vous n'aurez pas trop le choix puisque Sass est dans le framework par défaut.