Bonsoir à tous et à toutes 

Alors voilà, je me suis mise au préprocesseur Sass et Compass depuis quelque temps. Pour Sass, tout va bien et je trouve cela vraiment utile.

Mais j'ai quelques questions sur Compass :

La création de Sprite (que je n'ai pas encore testée) est une spécificité qui me sera bien utile. Par contre, je doute pour les préfixes et autres mixins prêt à l'emploi .

- Les préfixes, depuis, les navigateurs en ont de moins en moins besoin. Quand je vois la mixin border-radius, elle est inutile et il y en a pas mal comme cela dans Compass. J'ai regardée sur CanIuse et effectivement...

- Les mixins, il y en a de très intéressantes, mais depuis la sortie du framework (qui date un peu) il y a de nombreux blog, articles, codepen et tutos pour trouver de tout et n'importe quoi, mais surtout de jolies effets et astuces.

Du coup, je me dis qu'il est plus productif de créer ces propres mixins à l'aide des sources disponibles sur le web, qui sont la tendance actuelle et à jour.

Vous l’aurez compris-es, ma question est simple:  Compass est-il devenu réellement utile de nos jours ?

Sass + un task runner comme Gulp qui gère l’auto-prefixer + d’autres librairies/plugins en tout genre éffacent un peu Compass, à moins de voiloir une réelle rétro-compatibilité (comme ie8 par exemple)

Je remercie celles et ceux qui les utilises pour m'apporter leur retour d'expérience et leur pratique actuelle sur ce point   

-
Edité par pipelette13 2 janvier 2018 à 21:10:52

Bonjour,

Compass est en effet un peu dépassé. On peut, notamment avec les tasks runners, faire tout ce qu'il fait sans avoir la lourde dépendance à la fois à Ruby et à Compass lui-même (puisqu'il ajoute des fonctions supplémentaires).

Dans mes projets (pro comme perso), j'ai utilisé Grunt pour faire des sprites (je n'ai plus les noms en tête, je crois que c'était spriteforge pour le png, et svgsprite pour le svg, si tu veux je rechercherai plus sérieusement), pour les préfixes (en lançant Autoprefixer via PostCSS via Grunt :D), et les mixins je les fais moi-même De même, pour Sass, je prends libsass, la version en C, qui est infiniment plus rapide que l'implémentation originelle en Ruby.

Bonsoir Lamecarlate,

Alors déjà merci de ta réponse, je te souhaite une belle année 2018, quelle soit encore meilleure que 2017 et que ton ange gardien te protège  (j'évite la santé et tout ça, on te la certainement déjà dite...)

Bon maintenant passons aux choses sérieuses :

En effet, je suis juste débutante avec Compass et je me suis assez rapidement rendue compte qu'il me semblait quelque peu dépassé. Concernant la gestion de sprite ça fonctionne bien, sauf que j'ai eu quelques soucis avec le répertoire images du fichier .rb.

images_dir = "../images" mais dans mon .css je dois le modifier puis re-modifier le .rb sinon mon css ne trouve plus le bon chemin, enfin passons sur ce point.

1) perso j'ai choisie Gulp: j'aime bien son système task et de pipe (pas de jeu les mots les autres, hein...  ). J'ai consultée pas mal d'articles, il tourne sous npm (node.js), donc plus rapide, et possède un nombre conséquent de plugins pour tout faire. De quoi se passer de Compass du coup...

Il permet la génération de sprites, mais j'ai une question, quel plugins choisir : certains sembles assez complexes à mettre en place et utiliser, je pensais donc à Sprity ou celui-ci : http://frontendbabel.info/articles/css-sprites-with-gulp/ 

Mais aussi éviter les répétitions dans le CSS, si je prend le dernier lien (sprtitesmith)

.icon-home {
  background-image: url(sprite.png);
  background-position: 0px 0px;
  width: 16px;
  height: 16px;
}
.icon-home_hover {
  background-image: url(sprite.png);
  background-position: 0px -16px;
  width: 16px;
  height: 16px;
}
.icon-instagram {
  background-image: url(sprite.png);
  background-position: 0px -32px;
  width: 16px;
  height: 16px;
}

Si tu as un conseil à me donner sur ce point (facilité d'utilisation), je suis preneuse 

2) Libsass : Gulp permet d'écouter, ne pas arrêter le watch s'il trouve une erreur avec Plumber, optimisation des images, minification, auto-prefixer, Browsersync pour le live-reload du navigateur, concaténation des fichiers css, js, etc.. , nettoyer (gulp-clean), etc, etc...  et semble rapide dans le traitement (c'est ce qui est dit).

Bref: Il semble satisfaire à tous les besoins, donc à quoi me servirai d'utiliser LibSass ? je t'avoue que j'ai du mal comprendre son fonctionnement et utilité, qu'apporte t-il de plus que Gulp en complément ?

d'autant que je n'ai pas vraiment trouvée d'article sur le sujet. Certains disent aussi qu'il n'est pas encore assez mure et complet  ???

Si tu pouvais m'éclairer sur ce point aussi, afin que je comprenne l'intérêt qu'il m'apporte dans mon travail (sass + Gulp + ...?)

Voilà: voici mon projet de progression côté Front pour ce début d'année 

-
Edité par pipelette13 2 janvier 2018 à 21:11:06

meme en css on ne fait pas de tel répétition 

.icon-home, .icon-instagram, .icon-home_hover {
  background-image: url(sprite.png);
  width: 16px;
  height: 16px;
}

.icon-home {
  background-position: 0px 0px;
}

.icon-home_hover {
  background-position: 0px -16px;
}

.icon-instagram {
  background-position: 0px -32px;
}

Se qui diminue déjà grandement les répétitions tout de même.

Salut,

C'est assez dur de trouver de l'aide au niveau des task runner, car chacun aime se faire sa tambouille personnelle. Pour ma part, c'est généralement brunch pour les petits projets, et webpack pour les plus gros...

J'allais me coucher..

GuillaumeBo1, oui je sais bien mais la n'est pas ma question. La tu est en manu, moi je veux le générer une fois pour toute sans avoir à modifier le .css, c'est bien le principe. voir le contexte de mon message 

rhooManu, coucou  

Oui j'ai vu qu'il y a pleins de possibilités, j'ai choisie Sass et Gulp car ils sont très utilisés, il y a donc pas mal d'articles sur les sujets. Il faut bien débuter avec l'un ou l'autre.

Sass me plaît bien et il est assez simple à utiliser. Faire une boucle @each , les partials, @extend et créer ces mixins me font complètement redécouvrir le CSS  . Et Gulp semble accessible et idéal pour accompagner mon développement.

 J'ai regardée une vidéo et finalement je me suis dites que mon task runner répond à la plupart des besoins, du coup quel serait l'apport de LibSass comme complément ? Gulp semble assez rapide en traitement puisqu'il repose sur Node en commande npm.

J'espère être clair dans ma demande, bon sur ce, dodo.......

-
Edité par pipelette13 2 janvier 2018 à 2:22:13

Alors, pour préciser : LibSass c'est juste le moteur Sass. Et il se trouve qu'il existe un plugin pour Grunt qui utilise ce moteur (pas l'officiel, qui prend la version Ruby). Désolée de t'avoir embrouillée ^^' Il se peut que le plugin pour Gulp que tu utilises prenne la version C, je ne sais pas.

Et pour la répétition par Spritesmith : en vrai, ça n'a pas trop d'importance. Parce que ton site, tu vas le servir via un Apache (ou un autre serveur) avec gzip d'activé, et que gzip fait un excellent boulot de compression notamment lorsqu'il y a des répétitions dans le texte. Sources : https://stackoverflow.com/a/1512123 , https://meiert.com/en/blog/70-percent-css-repetition/#comment-240426 (le commentaire), https://csswizardry.com/2016/02/mixins-better-for-performance/ .

Ok je vois, à moi de tester les différents plugins  

Pour libSass ça reste toujours confus, si je comprend je peux parfaitement m'en passer du coup, du moins le temps de bien pratiquer Gulp.

Oui c'est la version C qui serait la plus appropriée, je vais faire encore quelque recherches.

J'ai consultée cette vidéo depuis : https://www.youtube.com/watch?v=WcdtNcuG_sI 

Bon elle date de 2015, et au finale je ne vois comme je l'ai dite plus haut l'intérêt en fait.... bon je suis un peu dans le floue.

Bon en fait je viens de me rendre compte ce qu'était libSass  

Via le site stack overFlow, c'est juste un wrapper en c/c++ de la version ruby.

Donc j'ai eu ma réponse, merci à tous-tes les participant(e)s 

Sujet résolu.

-
Edité par pipelette13 3 janvier 2018 à 21:03:22